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 相关文章推荐
Ext javascript建立超链接,进行事件处理的实现方法
Mar 22 Javascript
Jquery Uploadify多文件上传带进度条且传递自己的参数
Aug 28 Javascript
浅谈EasyUI中编辑treegrid的方法
Mar 01 Javascript
js实现选中复选框文字变色的方法
Aug 14 Javascript
js阻止浏览器默认行为触发的通用方法(推荐)
May 15 Javascript
JavaScript实现设计模式中的单例模式的一些技巧总结
May 17 Javascript
jquery点击展示与隐藏更多内容
Dec 03 Javascript
canvas实现动态小球重叠效果
Feb 06 Javascript
js实现下拉框效果(select)
Mar 28 Javascript
vue2中的keep-alive使用总结及注意事项
Dec 21 Javascript
JavaScript碎片—函数闭包(模拟面向对象)
Mar 13 Javascript
vue中h5端打开app(判断是安卓还是苹果)
Feb 26 Vue.js
使用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
php初学者写及时补给skype用户充话费的小程序
2008/11/02 PHP
zend framework配置操作数据库实例分析
2012/12/06 PHP
php采用curl模仿登录人人网发布动态的方法
2014/11/07 PHP
PHP实践教程之过滤、验证、转义与密码详解
2017/07/24 PHP
PHP接入微信H5支付的方法示例
2019/10/28 PHP
JavaScript 内置对象属性及方法集合
2010/07/04 Javascript
DOM和XMLHttpRequest对象的属性和方法整理
2012/01/04 Javascript
网页右键ie不支持event.preventDefault和event.returnValue (需要加window)
2013/02/22 Javascript
如何获取select下拉框的值(option没有及有value属性)
2013/11/08 Javascript
seaJs的模块定义和模块加载浅析
2014/06/06 Javascript
chrome浏览器当表单自动填充时如何去除浏览器自动添加的默认样式
2015/10/09 Javascript
基于canvas实现的绚丽圆圈效果完整实例
2016/01/26 Javascript
js原生实现FastClick事件的实例
2016/11/20 Javascript
jquery实现侧边栏左右伸缩效果的示例
2017/12/19 jQuery
原生JS+HTML5实现跟随鼠标一起流动的粒子动画效果
2018/05/03 Javascript
JavaScript常用事件介绍
2019/01/21 Javascript
微信小程序使用map组件实现路线规划功能示例
2019/01/22 Javascript
微信小程序日历插件代码实例
2019/12/04 Javascript
[43:24]完美世界DOTA2联赛PWL S3 INK ICE vs DLG 第二场 12.12
2020/12/17 DOTA
Python使用ftplib实现简易FTP客户端的方法
2015/06/03 Python
在Django中使用Sitemap的方法讲解
2015/07/22 Python
Python批量更改文件名的实现方法
2017/10/29 Python
深入flask之异步非堵塞实现代码示例
2018/07/31 Python
对Python 内建函数和保留字详解
2018/10/15 Python
Python深拷贝与浅拷贝用法实例分析
2019/05/05 Python
利用4行Python代码监测每一行程序的运行时间和空间消耗
2020/04/22 Python
介绍一下你对SOA的认识
2016/04/24 面试题
在校生钳工实习自我鉴定
2013/09/19 职场文书
学校采购员岗位职责
2014/01/02 职场文书
生产班组长岗位职责
2014/01/05 职场文书
省优秀教师事迹材料
2014/01/30 职场文书
总经理文秘岗位职责
2014/02/03 职场文书
人事经理岗位职责
2014/04/28 职场文书
入党综合考察材料
2014/06/02 职场文书
销售员未完成销售业绩的检讨书
2014/10/12 职场文书
「月刊Action」2022年5月号封面公开
2022/03/21 日漫