JQuery или JavaScript: определить, когда изображение закончило загрузку

Question

Как определить, когда изображение закончило загрузку, будь то с сервера или из кэша браузера?Я хочу загрузить различные изображения в один тег <img/> и определить, когда загрузка новых изображений закончилась.

Спасибо.

Answer 1

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

Answer 2

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

Событие onload сработает после полной загрузки одного изображения.

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

Answer 3

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

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

Answer 4

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

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

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

Надежда, которая также помогает другим.

Answer 5

Из очень похожего вопроса Официальный способ попросить 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');
});

Вы должны подтвердить на своей консоли:

снимок экрана-with-shadow.png http://img547.imageshack.us/img547/9681/yih.png

Answer 6

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

Answer 7

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

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

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

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