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

2019-11-20 23:56:29

字體：大中小

來源：轉載

供稿：網友

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

上一篇：獲取css樣式表內樣式的js函數currentStyle(IE),defaultView(FF)

下一篇：簡單易用的基于jQuery版仿新浪微博向下滾動效果(附DEMO)