浏览器image对象相关总结，（含PC浏览器，移动浏览器）

网上读到过很多关于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

　　下面测试代码：

(function(){
        var img=new Image(),onready=null,newWidth=0,newHeight= 0
                ,obj=document.getElementById('msg'),imgDate= 0;
        img.src = 'http://www.google.com.hk/intl/zh-CN/images/logo_cn.png';

        /*
            1：PC浏览器IE6-8中,图片在有浏览器的情况下，不再响应onload是存在得。所以统一采用判断complete的值判断是否从缓存中直接读取。
        */
        if(img.complete){
            obj.innerHTML+='from cache<br/>';
            img = img.onload = img.onerror = null;
        }

        /*
            2:所有浏览器中，在图片load之前确实可以获取到图片的宽与高值。
        */
        onready=function(){
            if(newWidth==img.width||newHeight==img.height){
                setTimeout(onready,13);
            }else{
                imgDate=new Date().getTime();
            }
            obj.innerHTML+='newWidth:'+img.width+';newHeight:'+img.height+';'+imgDate+'<br/>';
            obj.innerHTML+='naturalWidth：'+img.naturalWidth+'；naturalHeight：'+img.naturalHeight+'<br/>';
        }

        onready();

        img.onload=function(){
            /*
                3:PC浏览器IE6-8中,complete的值是在load之后进行修改得，其它浏览器是在之前。
            */
            /*
                4:此时会有一些再判断
                    比如PC浏览器IE6-8中，判断！img.complete 
                    其它浏览器中通过判断 typeof this.prevImageArr[i].naturalWidth !== "undefined" && this.prevImageArr[i].naturalWidth == 0
                    然后回调执行加载
            */
            obj.innerHTML+=img.complete+'<br/>';
            obj.innerHTML+='IEreadystate：'+img.readystate+'<br/>';
            obj.innerHTML+='naturalWidth：'+img.naturalWidth+'<br/>';
            obj.innerHTML+='onload'+'：'+(new Date().getTime()-imgDate)+'<br/>';
            img = img.onload = img.onerror = null;// IE gif动画会循环执行onload
        }

        /*
            疑问：很多人有这种写法，但是目前我只发现IE中onreadystatechange执行比onload要快，其它不太明白什么意思了，有知道的朋友可以告诉下。
            img.onload = img.onreadystatechange = function () {
                //6:个人感觉如果判断因为PC浏览器中
                if (!img.readyState || img.readyState == "loaded" || img.readyState == "complete") {
                    img.onload = img.onreadystatechange = null;
                }
            }
        */
    })();