浏览器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

　　下面测试代码：

 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 == 0
37                     然后回调执行加载
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动画会循环执行onload
44         }
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     })();

转载于:https://www.cnblogs.com/claresun/archive/2012/10/26/2741577.html

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！