图像预加载后执行 JavaSCript 代码

Question

我正在尝试创建某种回调代码，该代码在预加载图像后执行。

我的JS代码如下：

<script type='text/javascript'>
d=document;
window.onload=function()
{
   if (d.images)
   {
      d.getElementById('preload').style.display='block';
      i1=new Image;
      i1.src="http://link_to_image";
      d.getElementById('preload').style.display='none';
   }
}
</script>

所以在我的例子中，d.getElementById('preload').style.display='none';应该在图像完全加载到缓存后执行。

对如何实现这一目标有任何帮助吗？请仅使用没有库/插件要求的独立 JavaScript 解决方案。

Answer 1

我不确定图像 onload 事件在所有浏览器中的可靠性如何，因此我会非常仔细地测试：

var i1 = new Image();

i1.onload = function() {
   d.getElementById('preload').style.display = "none";
};

i1.src = "http://link_to_image";

Answer 2

看看这篇文章，我认为它会有所帮助：链接文本

与 JavaScript 中的许多其他对象一样，Image() 对象也带有一些事件处理程序。其中最有用的无疑是 onLoad() 处理程序，它在图像完成加载时调用。

Answer 3

在图像标签本身中使用 onload。

<img src="http://link_to_image" onload="alert('IMG LOADED')" />