Question

我正在尝试使用

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

保证图片完全加载以继续我的步骤。这个方法对我不起作用，因为我需要在加载第一张图片之后加载另一张图片（我有一个必须加载的图片数组，一个接一个，具有特定的时间间隔）。

是否有任何替代方案（可能是jQuery）来保证图片已加载？

Answer 1

from jquery documentation：加载事件在元素和所有子元素完全加载时发送给元素。此事件可以发送到与URL关联的任何元素：图像，脚本，框架，iframe和窗口对象。

所以你可以在你的图像周围创建一个包装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

使用名为imagesLoaded的jquery插件可以轻松完成此操作。你可以这样使用它：

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

如何在JavaScript运行之前保证图像加载？

2 个答案: