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

Question

在IE中，您可以onreadystatechange。有载入，但我读了可怕的东西。jQuery用“就绪”很好地包装了DOM的加载事件。我似乎只是不知道另一个很好的库的图像加载实现。上下文是我动态生成图像（通过服务器回调），可能需要一些时间下载。在我的IE-only代码中，我设置了img元素的src，然后当onreadystatechange事件以“完成”状态触发时，我将它添加到DOM，以便用户看到它。我对“原生”JavaScript解决方案或指向执行工作的库的指针感到满意。那里有很多图书馆，我确信这是我不知道正确的图书馆的情况。也就是说，我们已经是jQuery用户了，所以我并不急于为了获得这个功能而添加一个非常大的库。

Answer 1

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

var img = new Image();

img.onload = function() {

  alert('Done!');

}

img.src = '/images/myImage.jpg';

Answer 2

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

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

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

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

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

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