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

1、img.onload

img.onload是当一张图片被加载完成后所触发的事件

实现图片显示功能；

<div><img id=”img” alt=”img”/></div>

js部分：img.src=”图片”;

img.onload=function(){

//代码部分

}

2、img.complete

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

对于 complete 属性来讲,IE是根据图片是否显示过来判断，就是说当加载的图片显示出来后，complete 属性的值才为 true ，否则一直是 false ，和以前是否加载过该张图片没有关系，即和缓存没有关系！但是其它浏览器表现出来的确不一样，只要以前加载过该图，浏览器有缓存，complete 就为 true ，这和IE的 readyState 属性的表现一致！

这里要注意，显示与否和img.style.display无关；

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

img.src=”图片”;

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

img.complete 已经得到ie6-ie8,ff,google chorme,360这些浏览器的支持，偏偏ie9不支持，原因不解释，ie的理由总不是理由。

可以使用图片尺寸数值来判断，当没有加载完，图片尺寸是为0的。

if(img.complete||img.width)

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

最终解决方案

view sourceprint?
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

javasxript图片预加载兼容代码（IE7/IE8/IE9/火狐/谷歌/苹果）

//图片预加载
function readyImage(url,callback){
	var img = new Image();
	img.src=url;
	if(img.complete){
	var imgWh = [img.width,img.height];
	callback(i,imgWh);
	}else{
		img.onload = function(){
			var imgWh = [img.width,img.height];
			callback(i,imgWh);
		}
	}
}

我看很多人只用img.complete或者还用到浏览器判断，其实不用，这样就很好了，引用是这样引用的

//callback不要用引号，否则无效

readyImage(url,callback)