js 實現圖片預加載(js操作 Image對象屬性complete ，事件onload 異步加載圖片)

2019-11-20 23:53:40

字體：大中小

來源：轉載

供稿：網友

看個例子：

 
<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 這種解釋性語言的特性，在追加事件的時候一定要注意把事件追加在觸發該事件的句柄之前。

上一篇：寫了10年的Javascript也未必全了解的連續賦值運算

下一篇：基于jquery的3d效果實現代碼