加载所有图像后执行代码答案

【问题标题】：Execute code after all images are loaded加载所有图像后执行代码
【发布时间】：2013-12-12 12:25:43
【问题描述】：

我想在加载所有图像后进行一些界面修复（需要包含图像的元素的高度并使用它们来更改其他元素的高度）我将加载事件附加到所有图像但我的加载函数仅执行一次。我尝试只使用 jQuery：

$(function() {
    var $img = $('img');
    var length = $img.length;
    var count = 0;

    function load() {
       console.log(++count + ' == ' + length);
       if (count == length) {
          // all images loaded
       }
    }
    $img.load(load).error(load);
});

我也尝试使用 onload 和 onerror 事件：

$img.each(function() {
    this.onload = load;
    this.onerror = load;
});

但是当页面加载时我只有一个日志：

1 == 33

（我在 Xubuntu 上使用 Chromium 进行测试，但禁用了开发工具和缓存）

我在这里做错了什么？加载完所有图片后如何执行代码？

【问题讨论】：

标签： javascript jquery image

【解决方案1】：

听起来您应该处理window 的load 事件：

$( window ).load(function() {
// Glorious code!!
}

来自文档：“当页面完全加载时运行一个函数，包括图形。”

http://api.jquery.com/load-event/

【讨论】：

不，他不应该这样做，因为某些较旧的浏览器无法在已加载的图像上触发 onload 事件。但是如果 OP 不为每个图像使用特定的 onload 事件，这将让他计算每个图像的高度，所以这是一个可能的修复
抱歉，我应该更清楚一点，是的，您是正确的，因为这应该取代单个处理程序以支持更广泛的方法。

【解决方案2】：

页面加载完成后执行函数

$(window).load

这样所有元素就位并准备好进行“测量”

【讨论】：

$(window).load(function(){})