js判斷一個圖片是否已經存在於緩存

【解決】js判斷一個圖片是否已經存在於緩存（兼容IE各版本及FF）

【一】、如下片段是當晚在IE7、8及FF中測試執行成功的：

-----------------------------------------------------------------------------------------

如下代碼：

01	var url = "http://......../image.jpg";

02	var img = new Image();

03	img.src = url;

04

05	if(img.complete) {

06	alert('該圖片已經存在於緩存之中，不會再去重新下載');

07

}else{

08	alert('圖片不存在緩存之中');

09	img.onload = function() {

10	alert('圖片下載成功！');

11

}

12

}

使用Image對象的complete屬性來判斷指定圖片是否已經存在緩存之中，當complete屬性爲true是該圖片則已經存在於緩存之中，否則反之。

-----------------------------------------------------------------------------------------

 

 

【二】、今早使用IE9中測試竟然無效，判斷img.complete總爲false,是的確未緩存麼？但之後的load事件並未執行，說明瀏覽器的確緩存了這些圖片。但爲何img.complete返回爲false呢？

請看如下對img.complete屬性的解釋

-----------------------------------------------------------------------------------------

img.onload事件和img.complete屬性的簡介和應用

img.onload是當一張圖片被加載完成後所觸發的事件
實現圖片顯示功能；
<div>
<img id="img"/>
</div>

js部分：

 

1	img.src="圖片";

2	img.onload=showImg；

3	function showImg()

4

{

5

代碼部分。。。。

6

7

}

對於 complete 屬性來講，IE是根據圖片是否顯示過來判斷，就是說當加載的圖片顯示出來後，complete 屬性的值才爲 true ，否則一直是 false ，和以前是否加載過該張圖片沒有關係，即和緩存沒有關係！這裏要注意，顯示與否和img.style.display無關；

JS部分：

 

 

1	alert（img.complete）;//返回false

2	img.src="圖片";

3	alert(img.complete);//如果上面“圖片”獲取的時間比JS代碼順序執行的時間要常，那麼這裏就是false，否則就是true

 

-----------------------------------------------------------------------------------------

 

於是乎，你懂了，爲什麼在IE9中無效了。。。。再於是，你對發表第一個片段日誌的碼農想說一句：咋這麼不負責呢？（看來，盜版的東西還是不太可靠啊，必須自己動手測試才行）

 

【三】、最終解決方案

 

1	var url = "http://......../image.jpg";

2	var img = new Image();

3	img.src = url;

4

5	if(img.complete||img.width) {

6	alert('該圖片已經存在於緩存之中，不會再去重新下載');

7

8

}

 

於是你又發現，你竟然只加了一個或判斷。。

解釋一下，添加img.naturalWidth獲取圖片原始尺寸，當圖片未加載（未緩存、或加載失敗）時該值爲0，當然如果有緩存的話，返回的就是圖片的原始尺寸。

所以img.complete||img.naturalWidth 在js onload事件之前，如果圖片已經顯示，或獲取的尺寸大於零，表示圖片onload之前已經加載完成。

 PS:naturalWidth只有高版本瀏覽器支持(safari,firefox,chrome,與opera10+)，低版本的話，直接用img.width