js 实现图片预加载(js操作 Image对象属性complete ，事件onload 异步加载图片)
更新时间：2011年03月25日 00:52:26 作者：
通过js操纵DOM很多情况下都是为了实现和当前页html元素的异步载入，我谈谈对Image对象的一些认识。
看个例子：
<input type="button" name="" value="载入图片" onclick="addImg('tt.jpg')" />
<script type="text/javascript">
<!--
function addImg(isrc)
{
var Img = new Image();
Img.src = isrc;
Img.onload = function ()
{
document.body.appendChild(Img);
}
}
//-->
</script>
当包含上述代码的页面打开时并不载入 “tt.jpg” ，当点击按钮时候才载入。当载入完成后触发onload事件显示到页面上。如果你是第一次加载 “tt.jpg" 这张图片的话，运行正常。点击按钮加载并显示一张图片，如果重复点击会怎么样呢？
IE、Opera中，除了第一次加载 图片时候显示正常，之后再点击就没有反应了，刷新也一样。难道它们只触发一次 ”onload“ 事件？是缓存机制？
FF、Chrom中，每点击一次加载一张该图片。
稍微修改下：
<input type="button" name="" value="载入图片" onclick="addImg('tt.jpg')" />
<script type="text/javascript">
<!--
function addImg(isrc)
{
var Img = new Image();
Img.onload = function ()
{
document.body.appendChild(Img);
}
Img.src = isrc;
}
//-->
</script>
运行后发现，奇怪的事情发生了。所有的浏览器都一致了，都是每点击一次加载一张图片。这又是什么原因？由此可以见 IE、Opera 执行过程中并不是只触发一次 onload 事件！
联想一下 Image 对象的一些属性看看，complete、readyState(IE专属值[uninitialized,complete]) （为防止缓存影响效果请更换图片名称！）
<input type="button" name="" value="complete" onclick='alert("complete : "+Img.complete +"\nreadyState : "+Img.readyState)' />
<input type="button" name="" value="载入图片" onclick="addImg('mtm.jpg')" />
<script type="text/javascript">
<!--
var Img;
function addImg(isrc)
{
Img = new Image();
//Img.src = isrc;
Img.onload = function ()
{
alert("complete : "+Img.complete +"\nreadyState : "+Img.readyState)
document.body.appendChild(Img);
}
Img.src = isrc;
}
//-->
</script>
经过以上测试，可以看出一些不同点，对于 complete 属性来讲，IE是根据图片是否显示过来判断，就是说当加载的图片显示出来后，complete 属性的值才为 true ，否则一直是 false ，和以前是否加载过该张图片没有关系，即和缓存没有关系！但是其它浏览器表现出来的确不一样，只要以前加载过该图，浏览器有缓存，complete 就为 true ，这和IE的 readyState 属性的表现一致！
至此，可以肯定的是所有的浏览器都会缓存图片！可是上面的问题到底是什么原因导致的呢？
众所周知，从缓存里加载东西的速度是很快的，那么在
...
Img.src = isrc;
Img.onload = ...
...
的过程中，难道 IE、Opera 加载的速度快到，来不及追加事件？
这回加载一张根本不存在的图片看看效果：
<input type="button" name="" value="complete" onclick='alert("complete : "+Imgttmt.complete +"\nreadyState : "+Imgttmt.readyState)' />
<input type="button" name="" value="载入图片" onclick="addImg('mtmttyt.jpg')" />
<script type="text/javascript">
<!--
var Imgttmt;
function addImg(isrc)
{
Imgttmt = new Image();
Imgttmt.src = isrc;
alert("complete : "+Imgttmt.complete +"\nreadyState : "+Imgttmt.readyState)
Imgttmt.onload = function ()
{
alert("impossible")
}
}
//-->
</script>
可以肯定的是所有浏览器都不触发 onload 事件。从是否缓存或已经加载过图片的角度讲，IE、Opera表现正常，complete 始终为 false ；IE的 readyState 始终为uninitialized 。令人疑惑的是FF，其中 Imgttmt.complete 的值一直是 true ；更令人困惑的是 Chrom，它是在最初 new Imgttmt() 的时候 Imgttmt.complete 值为 false。而之后 Imgttmt.complete 值就一直为 true 了！如果换一张从来没有加载过的图片，FF和Chrom 的行为就一致了，都是一开始加载时， Imgttmt.complete 值为false， 之后为 true！
测试的过程中还发现，脚本的执行顺序的确会影响到类似于 onload 等事件的追加，如果在其显示后在追加事件就没有什么实际意义了！基于 javascript 这种解释性语言的特性，在追加事件的时候一定要注意把事件追加在触发该事件的句柄之前。
复制代码 代码如下:
<input type="button" name="" value="载入图片" onclick="addImg('tt.jpg')" />
<script type="text/javascript">
<!--
function addImg(isrc)
{
var Img = new Image();
Img.src = isrc;
Img.onload = function ()
{
document.body.appendChild(Img);
}
}
//-->
</script>
当包含上述代码的页面打开时并不载入 “tt.jpg” ，当点击按钮时候才载入。当载入完成后触发onload事件显示到页面上。如果你是第一次加载 “tt.jpg" 这张图片的话，运行正常。点击按钮加载并显示一张图片，如果重复点击会怎么样呢？
IE、Opera中，除了第一次加载 图片时候显示正常，之后再点击就没有反应了，刷新也一样。难道它们只触发一次 ”onload“ 事件？是缓存机制？
FF、Chrom中，每点击一次加载一张该图片。
稍微修改下：
复制代码 代码如下:
<input type="button" name="" value="载入图片" onclick="addImg('tt.jpg')" />
<script type="text/javascript">
<!--
function addImg(isrc)
{
var Img = new Image();
Img.onload = function ()
{
document.body.appendChild(Img);
}
Img.src = isrc;
}
//-->
</script>
运行后发现，奇怪的事情发生了。所有的浏览器都一致了，都是每点击一次加载一张图片。这又是什么原因？由此可以见 IE、Opera 执行过程中并不是只触发一次 onload 事件！
联想一下 Image 对象的一些属性看看，complete、readyState(IE专属值[uninitialized,complete]) （为防止缓存影响效果请更换图片名称！）
复制代码 代码如下:
<input type="button" name="" value="complete" onclick='alert("complete : "+Img.complete +"\nreadyState : "+Img.readyState)' />
<input type="button" name="" value="载入图片" onclick="addImg('mtm.jpg')" />
<script type="text/javascript">
<!--
var Img;
function addImg(isrc)
{
Img = new Image();
//Img.src = isrc;
Img.onload = function ()
{
alert("complete : "+Img.complete +"\nreadyState : "+Img.readyState)
document.body.appendChild(Img);
}
Img.src = isrc;
}
//-->
</script>
经过以上测试，可以看出一些不同点，对于 complete 属性来讲，IE是根据图片是否显示过来判断，就是说当加载的图片显示出来后，complete 属性的值才为 true ，否则一直是 false ，和以前是否加载过该张图片没有关系，即和缓存没有关系！但是其它浏览器表现出来的确不一样，只要以前加载过该图，浏览器有缓存，complete 就为 true ，这和IE的 readyState 属性的表现一致！
至此，可以肯定的是所有的浏览器都会缓存图片！可是上面的问题到底是什么原因导致的呢？
众所周知，从缓存里加载东西的速度是很快的，那么在
...
Img.src = isrc;
Img.onload = ...
...
的过程中，难道 IE、Opera 加载的速度快到，来不及追加事件？
这回加载一张根本不存在的图片看看效果：
复制代码 代码如下:
<input type="button" name="" value="complete" onclick='alert("complete : "+Imgttmt.complete +"\nreadyState : "+Imgttmt.readyState)' />
<input type="button" name="" value="载入图片" onclick="addImg('mtmttyt.jpg')" />
<script type="text/javascript">
<!--
var Imgttmt;
function addImg(isrc)
{
Imgttmt = new Image();
Imgttmt.src = isrc;
alert("complete : "+Imgttmt.complete +"\nreadyState : "+Imgttmt.readyState)
Imgttmt.onload = function ()
{
alert("impossible")
}
}
//-->
</script>
可以肯定的是所有浏览器都不触发 onload 事件。从是否缓存或已经加载过图片的角度讲，IE、Opera表现正常，complete 始终为 false ；IE的 readyState 始终为uninitialized 。令人疑惑的是FF，其中 Imgttmt.complete 的值一直是 true ；更令人困惑的是 Chrom，它是在最初 new Imgttmt() 的时候 Imgttmt.complete 值为 false。而之后 Imgttmt.complete 值就一直为 true 了！如果换一张从来没有加载过的图片，FF和Chrom 的行为就一致了，都是一开始加载时， Imgttmt.complete 值为false， 之后为 true！
测试的过程中还发现，脚本的执行顺序的确会影响到类似于 onload 等事件的追加，如果在其显示后在追加事件就没有什么实际意义了！基于 javascript 这种解释性语言的特性，在追加事件的时候一定要注意把事件追加在触发该事件的句柄之前。
相关文章
这篇文章主要为大家详细介绍了Bootstrap轮播图学习使用的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-02-02
这篇文章主要分享一个Javascript随机标签云代码实例,需要的朋友可以参考下。2016-06-06
这篇文章主要为大家介绍了tree shaking功能及使用原理详细解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪的相关资料2023-01-01
最近在网上看到了一些关于Javascript的面试题就整理了下来，希望对有需要的朋友或者自己能有一定的帮助，后续看到再继续补充。下面一起来看看这篇关于Javascript前端常见的面试题的文章，一起来学习学习吧。2017-03-03
BOM是浏览器对象模型，DOM是文档对象模型，前者是对浏览器本身进行操作，而后者是对浏览器（可看成容器）内的内容进行操作。这篇文章给大家介绍javascript bom是什么及bom和dom的区别，感兴趣的朋友一起学习吧2015-11-11
本文主要介绍了QT与javascript交互数据的实现，主要包括数据从QT流向JS以及数据从JS流向QT的几种方法，需要的朋友们下面随着小编来一起学习学习吧2021-05-05
在TypeScript中若一个变量使用了联合类型,那么当我们使用该变量时必不可少的会去明确的限制该变量的具体类型，这称为类型缩小,这篇文章主要给大家介绍了关于TypeScript学习笔记之类型缩小的相关资料,需要的朋友可以参考下2022-09-09
javascript中的自执行匿名函数可以用它创建命名空间，只要把自己所有的代码都写在这个特殊的函数包装内，那么外部就不能访问，除非你允许2014-09-09
这篇文章主要介绍了JavaScript替换当前页面的方法,涉及javascript中replace方法的使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-04-04
这篇文章主要介绍了javascript+HTML5自定义元素播放焦点图动画的相关资料,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-02-02
最新评论