Как гарантировать загрузку изображения до запуска моего JavaScript?

Question

Я пытаюсь использовать

img.onload = function() 
         { ... } 

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

Есть ли альтернатива (возможно, jQuery), чтобы гарантировать, что изображение было загружено?

Answer 1

from jquery documentation: load Событие отправляется элементу, когда он и все подэлементы были полностью загружены. Это событие может быть отправлено любому элементу, связанному с URL: изображениями, сценариями, фреймами, iframe и объектом window.

, чтобы вы могли создать оболочку DIV вокруг изображения, а затем сделать это так:

$("#imageWrap").load(function() { 
    // next steps go here 
}); 

--- редактировать ---

поскольку событие загрузки может не сработать правильно, я наткнулся на это: JavaScript: Know when an image is fully loaded

$.fn.imageLoad = function(fn){ 
    this.load(fn); 
    this.each(function() { 
     if (this.complete && this.naturalWidth !== 0) { 
      $(this).trigger('load'); 
     } 
    }); 
} 

будет лучшим решением!

Answer 2

Это можно сделать с помощью плагина jquery под названием imagesLoaded. Вы можете использовать его так:

for(var i = 0 ; i < img_array.length ; i++) { 
    imagesLoaded(img_array[i], function(){ 
     // Stuff to do after the image is loaded 
    }); 
}