如何在我的 JavaScript 运行之前保证图像加载？答案

【问题标题】：How to guarantee image load before my JavaScript runs?如何在我的 JavaScript 运行之前保证图像加载？
【发布时间】：2014-10-27 08:45:38
【问题描述】：

我正在尝试使用

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

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

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

【问题讨论】：

你的目的是什么？您是否正在尝试制作预加载器？
.ready() 怎么样？ api.jquery.com/ready
@Nick 是的，我已经预装了。您可以在 [此处] (brain.netii.net/practice_asso.html) 查看页面。
@Aaroniker 问题是 ready(): “指定一个函数在 DOM 完全加载时执行。”我需要知道何时加载图像（之前加载的那个 img 标签..）。

标签： javascript jquery html performance

【解决方案1】：

from jquery documentation: load 事件在元素和所有子元素都已完全加载后发送到该元素。此事件可以发送到与 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');
        }
    });
}

会是更好的解决方案！

【讨论】：

感谢您的回复。我试图以这种方式实现，但我有问题。在第一次迭代时一切正常，但是，在我提交表单后它出错了。如果不是太麻烦的话，你能看看实现吗：brain.netii.net/tempPractice.html？
sry - 我的错，我只是复制了相关部分，但不是完整的解决方案......但是 - 我不想窃取解决方案......所以请转到链接stackoverflow 主题，自行阅读。 $.fn。函数声明，是一个 jquery 原型声明 - 如果我的控制台显示正确，您只需将其粘贴到现有代码中。那行不通！

【解决方案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
    });
}

【讨论】：