与浏览器无关的检测图像加载时间的方法

Question

在IE中，您可以onreadystatechange。有负载。jQuery用“ready”很好地包装了DOM的load事件。似乎我只是不了解另一个漂亮的库对图像加载的实现。

上下文是我正在动态生成图像（通过服务器回调），可能需要一些时间才能下载。在仅用于IE的代码中，我设置了img元素的src，然后当onreadystatechange事件以“complete”状态触发时，我将其添加到DOM中，以便用户看到它。

我对“本机”JavaScript解决方案或可以完成此工作的库的指针感到满意。那里有很多图书馆，我敢肯定这是我的一个例子，只是不知道合适的图书馆。就是说，我们已经是jQuery用户，因此我不急于为了获得此功能而添加非常大的库。

Answer 1

注意： 我是在2010年写的，当时的浏览器是IE8/9beta，Firefox3.x和Chrome4.x。请仅将此用于研究目的，我怀疑您可以将其复制/粘贴到现代浏览器中，并且可以正常使用。

警告：
现在是2017年，我仍然时不时地对此有所了解，请仅将其用于研究目的。我目前不知道如何检测图像加载状态，但是可能有比这更优雅的方法了……至少我非常希望有这种方法。我强烈建议不要在没有更多研究的情况下在生产环境中使用我的代码。

警告第二部分Electric Boogaloo： 现在是2019年，大多数jQuery功能现在已内置在vanilla
JS中。如果您仍在使用它，可能是时候停止并考虑前往MDN并阅读Vanilla JS提供的一些有趣的新东西了。

我参加这个聚会有点晚了，也许这个答案会对别人有所帮助…

如果您使用的是jQuery，请不要理会股票事件处理程序（onclick/onmouseover/etc），实际上完全不要再使用它们了。使用他们在API中提供的事件方法。

这将在将图像附加到主体之前发出警报，因为在将图像加载到内存中时会触发加载事件。它正是按照您的指示进行操作：使用test.jpg的src创建一个图像，当test.jpg加载时发出警报，然后将其附加到正文中。

var img = $('<img src="test.jpg" />');
img.load(function() {
    alert('Image Loaded');
});
$('body').append(img);

在将图像插入到主体之后，这将提醒您，再次执行您告诉它的操作：创建图像，设置事件（未设置src，因此尚未加载），将图像附加到主体（仍然nosrc），现在设置src …现在加载了图像，因此触发了事件。

var img = $('<img />');
img.load(function() {
    alert('Image Loaded');
});
$('body').append(img);
$img.attr('src','test.jpg');

当然，您还可以添加一个错误处理程序，并使用bind（）合并一堆事件。

var img = $('<img />');
img.bind({
    load: function() {
        alert('Image loaded.');
    },
    error: function() {
        alert('Error thrown, image didn\'t load, probably a 404.');
    }
});
$('body').append(img);
img.attr('src','test.jpg');

根据@ChrisKempen的要求…

这是一种非事件驱动的方法，用于确定在加载DOM之后图像是否损坏。此代码是StereoChrome的文章的代码的派生，该文章使用naturalWidth，naturalHeight和complete属性确定图像是否存在。

$('img').each(function() {
    if (this.naturalWidth === 0 || this.naturalHeight === 0 || this.complete === false) {
        alert('broken image');
    }
});