成长脚印-专注于互联网发展
【解决】js判断一个图片是否已经存在于缓存(兼容IE各版本及FF)
post by:天之骄子 2012-11-8 2:46

【一】、如下片段是当晚在IE7、8及FF测试执行成功的:

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

如下代码:


var url = "http://......../image.jpg";
var img = new Image();
img.src = url;
 
if(img.complete) {
    alert('该图片已经存在于缓存之中,不会再去重新下载');
}else{
    alert('图片不存在缓存之中');
    img.onload = function() {
        alert('图片下载成功!');
    }
}


使用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部分:

img.src="图片";
img.onload=showImg;
function showImg()
{
   代码部分。。。。

}
对于 complete 属性来讲,IE是根据图片是否显示过来判断,就是说当加载的图片显示出来后,complete 属性的值才为 true ,否则一直是 false ,和以前是否加载过该张图片没有关系,即和缓存没有关系!这里要注意,显示与否和img.style.display无关

JS部分:


alert(img.complete);//返回false
img.src="图片";
alert(img.complete);//如果上面“图片”获取的时间比JS代码顺序执行的时间要常,那么这里就是false,否则就是true

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

 

于是乎,你懂了,为什么在IE9中无效了。。。。再于是,你对发表第一个片段日志的码农想说一句:咋这么不负责呢?(看来,盗版的东西还是不太可靠啊,必须自己动手测试才行)

 

【三】、最终解决方案

var url = "http://......../image.jpg";
var img = new Image();
img.src = url;

if(img.complete||img.width) {
    alert('该图片已经存在于缓存之中,不会再去重新下载');

}

于是你又发现,你竟然只加了一个或判断。。

解释一下,添加img.naturalWidth获取图片原始尺寸,当图片未加载(未缓存、或加载失败)时该值为0,当然如果有缓存的话,返回的就是图片的原始尺寸。

所以img.complete||img.naturalWidth 在js onload事件之前,如果图片已经显示,或获取的尺寸大于零,表示图片onload之前已经加载完成。

 PS:naturalWidth只有高版本浏览器支持(safari,firefox,chrome,与opera10+),低版本的话,直接用img.width

 

 【参考】js判断一个图片是否已经存在于缓存中

img.onload事件和img.complete属性的简介和应用

typeof img.complete != 'undefined' && !img.complete

取得图片原来的大小

评论:
铿锵猪
2014-04-30 10:06 回复
同样,对码农的你想说一句:咋这么不负责呢?
提两点:
1、你测试过if(img.complete||img.width)语句吗??在IE8下经测验,该语句对于已经onload过,而又手动清空了缓存,恒为true,你懂的。
2、其实只要img.complete足够了,虽然你实验了 img.complete与缓存没有没有关系也说明了true or false与速度有关,但并不适用于实际情况,试想,假如img.onload比img.complete快,需要缓存吗?实际项目中缓存是对付大图片的,也就是适用于onload必须比complete晚
铿锵猪
2014-04-30 09:58 回复
你说的也不对
发表评论:
昵称

邮件地址 (选填)

个人主页 (选填)

内容