快捷導(dǎo)航

js 實(shí)現(xiàn)圖片預(yù)加載(js操作 Image對象屬性complete ，事件onload 異步加載圖片)

更新時(shí)間：2011年03月25日 00:52:26 作者：

通過js操縱DOM很多情況下都是為了實(shí)現(xiàn)和當(dāng)前頁html元素的異步載入，我談?wù)剬mage對象的一些認(rèn)識(shí)。

看個(gè)例子：

 
<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)包含上述代碼的頁面打開時(shí)并不載入 “tt.jpg” ，當(dāng)點(diǎn)擊按鈕時(shí)候才載入。當(dāng)載入完成后觸發(fā)onload事件顯示到頁面上。如果你是第一次加載 “tt.jpg" 這張圖片的話，運(yùn)行正常。點(diǎn)擊按鈕加載并顯示一張圖片，如果重復(fù)點(diǎn)擊會(huì)怎么樣呢？
IE、Opera中，除了第一次加載圖片時(shí)候顯示正常，之后再點(diǎn)擊就沒有反應(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)擊一次加載一張圖片。這又是什么原因？由此可以見 IE、Opera 執(zhí)行過程中并不是只觸發(fā)一次 onload 事件！

聯(lián)想一下 Image 對象的一些屬性看看，complete、readyState(IE專屬值[uninitialized,complete]) （為防止緩存影響效果請更換圖片名稱?。?

復(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)過以上測試，可以看出一些不同點(diǎn)，對于 complete 屬性來講，IE是根據(jù)圖片是否顯示過來判斷，就是說當(dāng)加載的圖片顯示出來后，complete 屬性的值才為 true ，否則一直是 false ，和以前是否加載過該張圖片沒有關(guān)系，即和緩存沒有關(guān)系！但是其它瀏覽器表現(xiàn)出來的確不一樣，只要以前加載過該圖，瀏覽器有緩存，complete 就為 true ，這和IE的 readyState 屬性的表現(xiàn)一致！
至此，可以肯定的是所有的瀏覽器都會(huì)緩存圖片！可是上面的問題到底是什么原因?qū)е碌哪兀?
眾所周知，從緩存里加載東西的速度是很快的，那么在
...
Img.src = isrc;
Img.onload = ...
...
的過程中，難道 IE、Opera 加載的速度快到，來不及追加事件？

這回加載一張根本不存在的圖片看看效果：

復(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)加載過圖片的角度講，IE、Opera表現(xiàn)正常，complete 始終為 false ；IE的 readyState 始終為uninitialized 。令人疑惑的是FF，其中 Imgttmt.complete 的值一直是 true ；更令人困惑的是 Chrom，它是在最初 new Imgttmt() 的時(shí)候 Imgttmt.complete 值為 false。而之后 Imgttmt.complete 值就一直為 true 了！如果換一張從來沒有加載過的圖片，F(xiàn)F和Chrom 的行為就一致了，都是一開始加載時(shí)， Imgttmt.complete 值為false，之后為 true！
測試的過程中還發(fā)現(xiàn)，腳本的執(zhí)行順序的確會(huì)影響到類似于 onload 等事件的追加，如果在其顯示后在追加事件就沒有什么實(shí)際意義了！基于 javascript 這種解釋性語言的特性，在追加事件的時(shí)候一定要注意把事件追加在觸發(fā)該事件的句柄之前。

您可能感興趣的文章: