JQuery или JavaScript: определение загрузки изображения

Ответ 1

$('img').on('load', function() {
    // do whatever you want
});

Ответ 2

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

onload <img> событие будет срабатывать после полной загрузки одного изображения.

Итак, вы можете присоединить слушателя к этим событиям, используя объекты jQuery или DOM addEventListener (и IE attachEvent)

Ответ 3

Я думаю, что это выглядит немного чище

$('img').load(function() {
    // Your img has finished loading!
});

Ответ 4

Хорошо, это довольно старая нить, с которой я столкнулся вчера. Я использую backbone.js и require.js, и изменение размера моего макета всегда вызывало проблемы с представлениями, которые содержат изображения.

Итак, мне нужен был способ узнать, когда последнее изображение закончило загрузку, чтобы изменить размер макета. Все упомянутые выше решения не работали в моем случае. После нескольких часов больше исследований я нашел окончательное решение, которое работает:

http://desandro.github.com/imagesloaded/

Надеюсь, что это поможет и другим.

Ответ 5

Для более тщательного определения загрузки изображения, включая изображения, загруженные из кеша, попробуйте следующее: https://github.com/paulirish/jquery.imgloaded

Ответ 6

Из очень похожего вопроса Официальный способ спросить jQuery ждать загрузки всех изображений перед выполнением чего-либо и точно так же, как говорит Пикрасс:

С помощью jQuery вы используете $(document).ready() для выполнения чего-либо при загрузке DOM и $(window).load() для выполнения чего-либо, когда загружаются все другие вещи, например изображения.

Вот два примера:

DOM

jQuery(document).ready(function(){
    console.log('DOM ready');
});

Изображения/Все остальное

jQuery(window).load(function(){
    console.log('all other things ready');
});

Вы должны иметь возможность подтвердить свою консоль:

screenshot-with-shadow.png http://img547.imageshack.us/img547/9681/yih.png

Ответ 7

Все говорили о том, что событие должно быть запущено перед установкой src.

Но если вы не хотите беспокоиться об этом, вы можете использовать событие oncomplete (будет запущено даже с кешированными изображениями), чтобы запустить onload, например:

$("img").one("load", function() {
  // do stuff
}).each(function() {
  if(this.complete) $(this).load();
});

Используя jQuery, вам не нужно беспокоиться о обратной совместимости (например: img.height>0 в IE)