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



3 Answers

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

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

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

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

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

Question

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

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

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




HTML

<img id="myimage" src="http://farm4.static.flickr.com/3106/2819995451_23db3f25fe_t.jpg"/>​

脚本

setTimeout(function(){
    $('#myimage').attr('src','http://cdn.redmondpie.com/wp-content/uploads/2011/05/canarylogo.png').load(function(){
        alert('Main Image Loaded');

        $('#myimage').attr('src','image.jpg').bind({
            load: function(){
                alert('Image loaded.');
            },
            error: function(){
                alert('Image not loaded.');
            }
        });
    });
},1000);

JS小提琴

http://jsfiddle.net/gerst20051/sLge3/




我认为onload应该可以正常工作。 您是否必须为图像生成标记,还是可以静态添加它们? 如果是后者,我建议如下:

<img src="foo.png" class="classNeededToHideImage" onload="makeVisible(this)">

或者,您可以使用window.onload立即显示所有图像 - window.onload在所有外部资源完成加载后触发。

如果要动态添加图像,首先必须等待DOM准备好被修改,即使用jQuery或为本机不支持它的浏览器实现自己的DOMContentLoaded hack。

然后,您可以创建图像对象,分配onload侦听器以使其可见和/或将它们添加到文档中。

更好(但稍微复杂一点)就是在脚本执行时立即创建并开始加载图像。 在DOMContentLoaded上,您必须检查每个图像是否complete以决定是将它们立即添加到文档还是等待图像的onload侦听器触发。




似乎答案是在IE中使用onreadystatechange,在其他浏览器中使用onLoad。 如果两者都不可用,请做其他事情。 onLoad会更好,但IE从缓存中加载图像时不会触发它,如下面的答案中所述。




Related