it-swarm.com.ru

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

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

Спасибо.

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

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

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

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

5
Pikrass

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

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

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

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

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

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

4
bardu

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

2
cwd

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

2
bejonbee

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

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

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

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

0
Tom Sarduy