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

评论

1 楼 丁香花 2013-05-31  

楼主写得不错，之前工作上也是遇到这种，后面发现问题很多，直接用占位符。