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

看看这篇文章，我认为它会有所帮助：link text

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

Answer 3

在图片代码中使用onload。

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

在图像预加载后执行JavaSCript代码

3 个答案: