与浏览器无关的方式来检测何时加载图像

Question

在IE中,您可以onreadystatechange.有载入,但我读了可怕的东西.jQuery用"就绪"很好地包装了DOM的加载事件.我似乎只是不知道另一个很好的库的图像加载实现.

上下文是我动态生成图像(通过服务器回调),可能需要一些时间下载.在我的IE-only代码中,我设置了img元素的src,然后当onreadystatechange事件以"完成"状态触发时,我将它添加到DOM,以便用户看到它.

我对"原生"JavaScript解决方案或指向执行工作的库的指针感到满意.那里有很多图书馆,我确信这是我不知道正确的图书馆的情况.也就是说,我们已经是jQuery用户了,所以我并不急于添加一个非常大的库来获得这个功能.

Answer 1

注意:我在2010年写了这个,浏览器是IE 8/9 beta,Firefox 3.x和Chrome 4.x. 请将此用于研究目的,我怀疑您可以将其复制/粘贴到现代浏览器中并使其正常工作.

警告:现在是2017年,我现在仍然可以获得积分,请仅将其用于研究目的.我目前不知道如何检测图像加载状态,但有可能比这更优雅的方式...至少我真的希望有.我强烈建议不要在没有更多研究的生产环境中使用我的代码.

我参加这个派对有点晚了,也许这个答案会帮助别人......

如果您正在使用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,因此没有加载),将图像附加到身体(仍然没有src),现在设置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和完整属性来确定图像是否存在.

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

Answer 2

根据W3C规范,只有 BODY和FRAMESET元素提供附加的"onload"事件.有些浏览器无论如何都支持它,但请注意,不需要实现W3C规范.

可能与此讨论相关的事情,但不一定是您需要的答案,是这个讨论:

当图像在缓存中时,Image.onload事件不会在Internet Explorer上触发

可能与您的需求相关的其他东西,虽然它可能不是,这个信息支持任何动态加载的 DOM元素的合成"onload"事件:

如何确定是否已将动态创建的DOM元素添加到DOM中？

Answer 3

我找到的唯一可靠的方法就是在客户端这样做,就像这样......

var img = new Image();
img.onload = function() {
  alert('Done!');
}
img.src = '/images/myImage.jpg';