网上读到过很多关于image的问题描述，大概如下：

1：怎么判断是否加载完成

　　关于IE中图片有浏览器缓存onload不再触发问题。

　　onload执行中IE对complete属性的修改顺序问题。

　　onload中关于IE私有属性readyState的处理问题。

2：在onload之前获取image大小

在此做一个总结归纳，测试包含PC浏览器与移动浏览器：

　　PC浏览器：IE6 IE7 IE8 IE9 FF CH OP SA

　　移动浏览器：安卓:UC8.2 8.5 8.6 8.7 QQ3.5 3602.5 operamini 自带(2.1)  

　　　　　　　　苹果(ios5 ios6):Safari UC QQ

　　　　　　　　WP：IE9 UC2.5

　　W3C规范中有如下定义：

　　属性 complete：返回浏览器是否已完成对图像的加载。naturalWidth/naturalHeight：获取图像的大小（Opera不支持）

　　方法 onload：当图像装载完毕时调用的事件句柄。onerror：在装载图像的过程中发生错误时调用的事件句柄。onabort：当用户放弃图像的装载时调用的事件句柄。

　　IE有一个私有属性：readyState

　　下面测试代码：

1 (function(){ 2         var img=new Image(),onready=null,newWidth=0,newHeight= 0 3                 ,obj=document.getElementById('msg'),imgDate= 0; 4         img.src = 'http://www.google.com.hk/intl/zh-CN/images/logo_cn.png'; 5  6         /* 7             1：PC浏览器IE6-8中,图片在有浏览器的情况下，不再响应onload是存在得。所以统一采用判断complete的值判断是否从缓存中直接读取。 8         */ 9         if(img.complete){10             obj.innerHTML+='from cache
';11             img = img.onload = img.onerror = null;12         }13 14         /*15             2:所有浏览器中，在图片load之前确实可以获取到图片的宽与高值。16         */17         onready=function(){18             if(newWidth==img.width||newHeight==img.height){19                 setTimeout(onready,13);20             }else{21                 imgDate=new Date().getTime();22             }23             obj.innerHTML+='newWidth:'+img.width+';newHeight:'+img.height+';'+imgDate+'
';24             obj.innerHTML+='naturalWidth：'+img.naturalWidth+'；naturalHeight：'+img.naturalHeight+'
';25         }26 27         onready();28 29         img.οnlοad=function(){30             /*31                 3:PC浏览器IE6-8中,complete的值是在load之后进行修改得，其它浏览器是在之前。32             */33             /*34                 4:此时会有一些再判断35                     比如PC浏览器IE6-8中，判断！img.complete 36                     其它浏览器中通过判断 typeof this.prevImageArr[i].naturalWidth !== "undefined" && this.prevImageArr[i].naturalWidth == 037                     然后回调执行加载38             */39             obj.innerHTML+=img.complete+'
';40             obj.innerHTML+='IEreadystate：'+img.readystate+'
';41             obj.innerHTML+='naturalWidth：'+img.naturalWidth+'
';42             obj.innerHTML+='onload'+'：'+(new Date().getTime()-imgDate)+'
';43             img = img.onload = img.onerror = null;// IE gif动画会循环执行onload44         }45 46         /*47             疑问：很多人有这种写法，但是目前我只发现IE中onreadystatechange执行比onload要快，其它不太明白什么意思了，有知道的朋友可以告诉下。48             img.onload = img.onreadystatechange = function () {49                 //6:个人感觉如果判断因为PC浏览器中50                 if (!img.readyState || img.readyState == "loaded" || img.readyState == "complete") {51                     img.onload = img.onreadystatechange = null;52                 }53             }54         */55     })();