Javascript/jQuery: Как обнаружить img полностью загружен или нет?

Question

Все, что мне нужно сделать, это найти изображение в центре его родительского div.
Во-первых, я попробовал это.

$(document).ready(function() { 
    $('#image1').css({ 
    'top': 50%, 'left': 50%, 
    'margin-top': (-$('#image1').height()/2) + 'px', 
    'margin-left': (-$('#image1').width()/2) + 'px' 
    }); 
}); 

Это не удалось причиной $ ('# image1'). Высота() и ширину() дает 0 до его полной загрузки.
Таким образом, я попытался продолжить просмотр размера изображения, пока он не будет иметь определенную ширину и высоту.
как,

function inspectSize() { return ($('#image1').width() != 0); } 
function setPosition() { 
    if(!inspectSize()) { 
     setTimeout(setPosition, 1000); 
     return; 
    } 
    $('#image1').css({ 
     'top': 50%, 'left': 50%, 
     'margin-top': (-$('#image1').height()/2) + 'px', 
     'margin-left': (-$('#image1').width()/2) + 'px' 
    }); 
} 
$(document).ready(setPosition); 

Тем не менее он не работает.
, потому что $ ('# изображение'). Ширина() возвращает 28px, прежде чем он будет загружен в IE8 (кстати, IE7 был штраф)

Так что я, наконец, попытался waitForImages jQuery plugin , как это,

$(document).ready(function() { 
    $('#image1').waitForImages(function() { 
     setPosition(); // without inspectSize() 
    }); 
}); 

Он отлично работает с кешированными изображениями, но не работает с не кэшированными изображениями.
Функция вызывается до Image1 имеет ширину и высоту.

Что мне делать?

Answer 1

Вы должны быть в состоянии просто привязать обратный вызов репозиционирования к обработчику событий load.

Так что в вашем последнем примере:

$('#image1').load(function() { 
    setPosition(); // without inspectSize() 
}); 

Где #image1 указывает на теге изображения. Кроме того, как вы упомянуть #image1 может быть просто контейнер, то: -

$('#image1 img').load(function() { 
    setPosition(); 
}); 

Update jfriend00 делает хорошую точку ниже, в том, что «нагрузка» будет, когда изображение добавляется в DOM, а не только огонь если он уже существует на странице во время запуска вашего JavaScript.

Чтобы охватить оба сценария, вы можете сделать это:

var img = $('#image1'); 

if (img.prop('complete')) { 
    setPosition(); 
} else { 
    img.load(function() { setPosition(); }); 
} 

prop('complete') проверка возвращает истину, если изображение уже существует, и если это не привязывает обработчик событий «нагрузки».

Answer 2

Простым примером является привязка события загрузки к изображению. Я всегда делаю следующее

<img data-src="image.jpg" /> 

к сведению, что я не установлен атрибут src еще

$(function() { 
    $("img").each(function() { 
     $(this).load(function() { 
      alert('ready to call $(this).width()'); 
     }).prop("src", $(this).prop("data-src")); 
    }); 
}); 

новый ЦСИ в .prop("src", $(this).prop("data-src")); Сета после события нагрузки переплетены

Answer 3

Попробуйте написать тот же код внутри.

$('window').load(function() { 
    // Your code here.. 
});