我是在2010年写的,当时的浏览器是IE8/9beta,Firefox3.x和Chrome4.x。请仅将此用于研究目的,我怀疑您可以将其复制/粘贴到现代浏览器中,并且可以正常使用。
现在是2017年,我仍然时不时地对此有所了解,请仅将其用于研究目的。我目前不知道如何检测图像加载状态,但是可能有比这更优雅的方法了……至少我非常希望有这种方法。我强烈建议不要在没有更多研究的情况下在生产环境中使用我的代码。
现在是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');
}
});