JavaScript与Image加载事件（onload）、加载状态
（complete）
昨天⽤jQuery插件aeImageResize，发现它更有优势：每张图⽚加载完后，会马上进⾏等⽐缩放。
这归于图⽚对象Image的加载事件onload的功劳。
查看插件的源码，发现它也依赖图⽚对象的complete属性和onload事件，并且特别把IE6区分对待，到底IE6在图⽚加载对象上，与其它浏览器有什么不同呢？
看下⽂：
通过js操纵DOM很多情况下都是为了实现和当前页html元素的异步载⼊，我谈谈对Image对象的⼀些认识。
看个例⼦：
复制代码代码如下:
<input type="button" name="" value="载⼊图⽚" onclick="addImg('tt.jpg')" />
<script type="text/javascript">
<!--
function addImg(isrc)
{
var Img = new Image();javascript的特性
Img.src = isrc;
{
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();
{
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 : "+Imgplete +"\nreadyState :
"+adyState)' />
<input type="button" name="" value="载⼊图⽚" onclick="addImg('mtm.jpg')" />
<script type="text/javascript">
<!--
var Img;
function addImg(isrc)
{
Img = new Image();
//Img.src = isrc;
{
alert("complete : "+Imgplete +"\nreadyState : "+adyState)
document.body.appendChild(Img);
}
Img.src = isrc;
}
//-->
</script>
经过以上测试，可以看出⼀些不同点，对于 complete 属性来讲，IE是根据图⽚是否显⽰过来判断，就是说当加载的图⽚显⽰出来后，complete 属性的值才为 true ，否则⼀直是 false ，和以前是否加载过该张图⽚没有关系，即和缓存没有关系！但是其它浏览器表现出来的确不⼀样，只要以前加载过该图，浏览器有缓存，complete 就为 true ，这和IE的 readyState 属性的表现⼀致！
⾄此，可以肯定的是所有的浏览器都会缓存图⽚！可是上⾯的问题到底是什么原因导致的呢？
众所周知，从缓存⾥加载东西的速度是很快的，那么在
复制代码代码如下:
...
Img.src = isrc;
...
的过程中，难道 IE、Opera 加载的速度快到，来不及追加事件？
这回加载⼀张根本不存在的图⽚看看效果：
复制代码代码如下:
<input type="button" name="" value="complete" onclick='alert("complete : "+Imgttmtplete +"\nreadyState :
"+adyState)' />
<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 : "+Imgttmtplete +"\nreadyState : "+adyState)
{
alert("impossible")
}
}
/
/-->
</script>
可以肯定的是所有浏览器都不触发 onload 事件。
从是否缓存或已经加载过图⽚的⾓度讲，IE、Opera表现正常，complete 始终为 false ；IE的 readyState 始终为uninitialized 。
令⼈疑惑的是FF，其中 Imgttmtplete 的值⼀直是 true ；
更令⼈困惑的是 Chrom，它是在最初 new Imgttmt() 的时候 Imgttmtplete 值为 false。⽽之后 Imgttmtplete 值就⼀直为 true 了！
如果换⼀张从来没有加载过的图⽚，FF和Chrom 的⾏为就⼀致了，都是⼀开始加载时， Imgttmtplete 值为false，之后为
true！
测试的过程中还发现，脚本的执⾏顺序的确会影响到类似于 onload 等事件的追加，如果在其显⽰后在追加事件就没有什么实际意义了！
基于 javascript 这种解释性语⾔的特性，在追加事件的时候⼀定要注意把事件追加在触发该事件的句柄之前。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。