在图像预加载后执行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";