快捷導(dǎo)航

JavaScript與Image加載事件(onload)、加載狀態(tài)(complete)

更新時(shí)間：2011年02月14日 21:54:31 作者：

以前寫(xiě)過(guò)一個(gè)圖片等比縮放的Js函數(shù)，缺陷是要等到所有圖片都加載完畢了，才能進(jìn)行等比縮放。

昨天用jQuery插件aeImageResize，發(fā)現(xiàn)它更有優(yōu)勢(shì)：每張圖片加載完后，會(huì)馬上進(jìn)行等比縮放。
這歸于圖片對(duì)象Image的加載事件onload的功勞。
查看插件的源碼，發(fā)現(xiàn)它也依賴(lài)圖片對(duì)象的complete屬性和onload事件，并且特別把IE6區(qū)分對(duì)待，到底IE6在圖片加載對(duì)象上，與其它瀏覽器有什么不同呢？

看下文：

通過(guò)js操縱DOM很多情況下都是為了實(shí)現(xiàn)和當(dāng)前頁(yè)html元素的異步載入，我談?wù)剬?duì)Image對(duì)象的一些認(rèn)識(shí)。
看個(gè)例子：

復(fù)制代碼代碼如下:

 
<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> 

當(dāng)包含上述代碼的頁(yè)面打開(kāi)時(shí)并不載入“tt.jpg”，當(dāng)點(diǎn)擊按鈕時(shí)候才載入。當(dāng)載入完成后觸發(fā)onload事件顯示到頁(yè)面上。如果你是第一次加載 “tt.jpg" 這張圖片的話(huà)，運(yùn)行正常。點(diǎn)擊按鈕加載并顯示一張圖片，如果重復(fù)點(diǎn)擊會(huì)怎么樣呢？
IE、Opera中，除了第一次加載圖片時(shí)候顯示正常，之后再點(diǎn)擊就沒(méi)有反應(yīng)了，刷新也一樣。難道它們只觸發(fā)一次 “onload”事件？是緩存機(jī)制？
FF、Chrom中，每點(diǎn)擊一次加載一張?jiān)搱D片。
稍微修改下：

復(fù)制代碼代碼如下:

 
<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> 

運(yùn)行后發(fā)現(xiàn)，奇怪的事情發(fā)生了。
所有的瀏覽器都一致了，都是每點(diǎn)擊一次加載一張圖片。這又是什么原因？由此可以見(jiàn) IE、Opera 執(zhí)行過(guò)程中并不是只觸發(fā)一次 onload 事件！
聯(lián)想一下 Image 對(duì)象的一些屬性看看，complete、readyState(IE專(zhuān)屬值[uninitialized,complete]) （為防止緩存影響效果請(qǐng)更換圖片名稱(chēng)！）

復(fù)制代碼代碼如下:

 
<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> 

經(jīng)過(guò)以上測(cè)試，可以看出一些不同點(diǎn)，對(duì)于 complete 屬性來(lái)講，IE是根據(jù)圖片是否顯示過(guò)來(lái)判斷，就是說(shuō)當(dāng)加載的圖片顯示出來(lái)后，complete 屬性的值才為 true ，否則一直是 false ，和以前是否加載過(guò)該張圖片沒(méi)有關(guān)系，即和緩存沒(méi)有關(guān)系！但是其它瀏覽器表現(xiàn)出來(lái)的確不一樣，只要以前加載過(guò)該圖，瀏覽器有緩存，complete 就為 true ，這和IE的 readyState 屬性的表現(xiàn)一致！
至此，可以肯定的是所有的瀏覽器都會(huì)緩存圖片！可是上面的問(wèn)題到底是什么原因?qū)е碌哪兀?
眾所周知，從緩存里加載東西的速度是很快的，那么在

復(fù)制代碼代碼如下:

 
... 
Img.src = isrc; 
Img.onload = ... 
... 

的過(guò)程中，難道 IE、Opera 加載的速度快到，來(lái)不及追加事件？
這回加載一張根本不存在的圖片看看效果：

復(fù)制代碼代碼如下:

 
<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> 

可以肯定的是所有瀏覽器都不觸發(fā) onload 事件。
從是否緩存或已經(jīng)加載過(guò)圖片的角度講，IE、Opera表現(xiàn)正常，complete 始終為 false ；IE的 readyState 始終為uninitialized 。
令人疑惑的是FF，其中 Imgttmt.complete 的值一直是 true ；
更令人困惑的是 Chrom，它是在最初 new Imgttmt() 的時(shí)候 Imgttmt.complete 值為 false。而之后 Imgttmt.complete 值就一直為 true 了！
如果換一張從來(lái)沒(méi)有加載過(guò)的圖片，F(xiàn)F和Chrom 的行為就一致了，都是一開(kāi)始加載時(shí)， Imgttmt.complete 值為false，之后為 true！
測(cè)試的過(guò)程中還發(fā)現(xiàn)，腳本的執(zhí)行順序的確會(huì)影響到類(lèi)似于 onload 等事件的追加，如果在其顯示后在追加事件就沒(méi)有什么實(shí)際意義了！
基于 javascript 這種解釋性語(yǔ)言的特性，在追加事件的時(shí)候一定要注意把事件追加在觸發(fā)該事件的句柄之前。

您可能感興趣的文章: