Проверьте, загружены ли дочерние элементы (изображения) перед выполнением?

Question

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

Как я могу это сделать? jquery доступен для использования.

Answer 1

Вы должны подать в суд на событие load

$('img').load(function(){
   //here do what you need to do when the img is loaded
});

Есть некоторые предостережения

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

Распространенную проблему, которую разработчики пытаются решить с помощью .load () ярлык для выполнения функции, когда изображение (или коллекция изображения) полностью загружены. Есть несколько известных предостережений с это то, что следует отметить. Это:

• Он не работает согласованно и надежно кросс-браузерно
• В WebKit он не работает корректно, если для src изображения установлено то же значение src, что и раньше
• Не правильно всплывает дерево DOM
• Может перестать срабатывать для изображений, которые уже находятся в кеше браузера

Answer 2

Вы можете сделать что-то вроде этого:

var files = ['a.jpg','b.png']; //defines all assets needed

$.each(files,function(){
   var tmp = new Image();
   tmp.src = this; //creates a new dummy object
   tmp.on('load',function(){
   var i = files.indexOf(this);
      files.splice(i,1); //when dummy object has loaded it gets removed from array
      if (!files.length){ //when array is empty we're all set
         alert('Preloading done!');
      }
   });
});