ie和firefox中img对象区别的困惑


Posted in Javascript onDecember 27, 2006

在调试js时遇到一些恶心的问题,于是做了一个测试程序,放到网上让大家帮我测试。帖子见http://vchelp.net/cndevforum/subject_view.asp?page=-1&subject_id=165791

下面我给出关于测试的解释:

起因源于我想做这么一个网页:用户上传一个图片后,如果图片大于500象素,则在客户端把图片缩小成500象素大小。但是不想让用户看到这个大小调整过程。于是想首先隐藏这个图片,在整个网页下载完成后,调整大小,然后再显示调整好的图像。

于是我首先设置img标签的style="display:none",然后在window.onload中获取原图大小,进行调整。
<img src="http:......" style="display:none" id="c010_jpg">

结果发现firefox下,一个disolay=none的图像width和height是原图的实际大小,但是ie下却都是0

于是想到稳妥的办法是建立一个image对象,然后对src赋值,进而读取原图大小的信息:
var oImg = new Image();
oImg.src = docunent.getElementById("c010_jpg").src;
//马上读取oImg的width和height
alert([oImg.width, oImg.height]);

结果在ie测试发现,上面的代码会输出“0,0”
我怀疑这说明当ie解析一个display:none的img标签时,并没有下载这个图片,所以上面的代码对oImg.src赋值后ie需要从目标地址下载这个图片,当然,这个过程是异步的过程
而在firefox下,上面的代码会输出正确的信息,这说明firefox解析display:none的图片时,已经下载了这个图片。以后再对oImg.src赋值时,直接从缓存中获取,所以速度快

想到这一点我只好用更复杂更稳妥的办法了:
var oImg = new Image();
oImg.onload = function (){alert([oImg.width, oImg.height]);}
oImg.src = docunent.getElementById("c010_jpg").src;
//当src被载入后,输出oImg的宽和高

使用事件和回调函数是没办法的事情。处理这种异步过程使程序结构变得很难看。

另外,在w3c中( http://www.w3.org/TR/REC-DOM-Level-1/idl-definitions.html)没有找到HTMLImageElement的readyState和complete属性,
发现firefox实现了complete属性,而ie实现了complete属性和readyState属性

但是两者对属性的定义好像不同:
firefox: 一个图像被下载完毕,complete属性就是true,没有下载完毕则为false
ie:一个图像没有被下载完毕,则readyState属性为uninitialized,complete属性是false.当下载完毕时, readyState为complete,而如果此时图片还没有显示,complete为false,显示以后(display:block)此属性才变成true

没想到一个简单的功能竟然这么费劲,浏览器的兼容问题很难顺利解决,特别是很多细节非常浪费时间,希望别人遇到这些问题时还是多考虑从服务端脚本中解决这些问题。从而绕过对浏览器兼容的复杂测试。

另外我还非常疑惑,为什么现实中的ie对于onload事件,大部分不是异步的,只有少数同志的ie对于此事件是异步的。

Javascript 相关文章推荐
javascript编程起步(第七课)
Feb 27 Javascript
javascript 打开页面window.location和window.open的区别
Mar 17 Javascript
JS字符串截取函数实例
Dec 27 Javascript
JS实现的竖向折叠菜单代码
Oct 21 Javascript
javascript中tostring()和valueof()的用法及两者的区别
Nov 16 Javascript
AngularJS使用自定义指令替代ng-repeat的方法
Sep 17 Javascript
js/jquery控制页面动态加载数据 滑动滚动条自动加载事件的方法
Feb 08 Javascript
基于Vue实现支持按周切换的日历
Sep 24 Javascript
React-Native之定时器Timer的实现代码
Oct 04 Javascript
AngularJS监听ng-repeat渲染完成的两种方法
Jan 16 Javascript
Vue路由管理器Vue-router的使用方法详解
Feb 05 Javascript
JS+CSS实现过渡特效
Jan 02 Javascript
使用javascript访问XML数据的实例
Dec 27 #Javascript
URL编码转换,escape() encodeURI() encodeURIComponent()
Dec 27 #Javascript
escape、encodeURI、encodeURIComponent等方法的区别比较
Dec 27 #Javascript
破除网页鼠标右键被禁用的绝招大全
Dec 27 #Javascript
Windows Live的@live.com域名注册漏洞 利用代码
Dec 27 #Javascript
用javascript实现无刷新更新数据的详细步骤 asp
Dec 26 #Javascript
提高 DHTML 页面性能
Dec 25 #Javascript
You might like
基于MySQL体系结构的分析
2013/05/02 PHP
php实现可以设置中奖概率的抽奖程序代码分享
2014/01/19 PHP
php及codeigniter使用session-cookie的方法(详解)
2017/04/06 PHP
深入浅析安装PhpStorm并激活的步骤详解
2020/09/17 PHP
判断多个元素(RADIO,CHECKBOX等)是否被选择的原理说明
2009/02/18 Javascript
javascript 程序库的比较(一)之DOM功能
2010/04/07 Javascript
AMD异步模块定义介绍和Require.js中使用jQuery及jQuery插件的方法
2014/06/06 Javascript
js与C#进行时间戳转换
2014/11/14 Javascript
深入理解JavaScript中的对象
2015/06/04 Javascript
JavaScript中的call方法和apply方法使用对比
2015/08/12 Javascript
js获取及判断键盘按键的方法
2015/12/01 Javascript
JS模拟bootstrap下拉菜单效果实例
2016/06/17 Javascript
JS 实现微信扫一扫功能
2018/09/14 Javascript
浅谈关于iview表单验证的问题
2018/09/29 Javascript
[00:47]DOTA2荣耀之路6:天火,天火!
2018/05/30 DOTA
在Python中用keys()方法返回字典键的教程
2015/05/21 Python
Python系统监控模块psutil功能与经典用法分析
2018/05/24 Python
python批量图片处理简单示例
2019/08/06 Python
解决Django连接db遇到的问题
2019/08/29 Python
Django1.11自带分页器paginator的使用方法
2019/10/31 Python
Python3 selenium 实现QQ群接龙自动化功能
2020/04/17 Python
python和php哪个容易学
2020/06/19 Python
python字典按照value排序方法
2020/12/28 Python
Yves Rocher伊夫·黎雪美国官网:法国始创植物美肌1959
2019/01/09 全球购物
请说出几个常用的异常类
2013/01/08 面试题
应届生法律顾问求职信
2013/11/19 职场文书
中学教师岗位职责
2013/11/26 职场文书
校园联欢晚会主持词
2014/03/17 职场文书
交通事故协议书范文
2014/04/16 职场文书
财务内勤岗位职责
2014/04/17 职场文书
2014年保卫科工作总结
2014/12/05 职场文书
2014年酒店服务员工作总结
2014/12/08 职场文书
自主招生自荐信格式范文
2015/03/25 职场文书
活动总结书怎么写
2015/05/11 职场文书
海上钢琴师的观后感
2015/06/11 职场文书
UNION CREATIVE《Re:从零开始的异世界生活》雷姆手办
2022/03/20 日漫