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 相关文章推荐
jQuery live
May 15 Javascript
javascript对select标签的控制(option选项/select)
Jan 31 Javascript
html+css+js实现xp window界面及有关功能
Mar 26 Javascript
浅谈JavaScript之事件绑定
Jul 08 Javascript
超级简单实现JavaScript MVC 样式框架
Mar 24 Javascript
javascript HTML+CSS实现经典橙色导航菜单
Feb 16 Javascript
微信小程序开发之录音机 音频播放 动画实例 (真机可用)
Dec 08 Javascript
JS获取浏览器地址栏的多个参数值的任意值实例代码
Jul 24 Javascript
JS 正则表达式验证密码、邮箱格式的实例代码
Oct 28 Javascript
JS实现点击li标签弹出对应的索引功能【案例】
Feb 18 Javascript
js get和post请求实现代码解析
Feb 06 Javascript
js节流防抖应用场景,以及在vue中节流防抖的具体实现操作
Sep 21 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
php中convert_uuencode()与convert_uuencode函数用法实例
2014/11/22 PHP
ThinkPHP中使用ajax接收json数据的方法
2014/12/18 PHP
PHP使用JSON和将json还原成数组
2015/02/12 PHP
PHP使用MPDF类生成PDF的方法
2015/12/08 PHP
项目实践之javascript技巧
2007/12/06 Javascript
javascript针对DOM的应用分析(二)
2012/04/15 Javascript
JavaScript实现从数组中选出和等于固定值的n个数
2014/09/03 Javascript
JS实现点击按钮控制Div变宽、增高及调整背景色的方法
2015/08/05 Javascript
jquery使用ul模拟select实现表单美化的方法
2015/08/18 Javascript
JS数字千分位格式化实现方法总结
2016/12/16 Javascript
EasyUI折叠表格层次显示detailview详解及实例
2016/12/28 Javascript
基于vue的短信验证码倒计时demo
2017/09/13 Javascript
vue父组件向子组件(props)传递数据的方法
2018/01/02 Javascript
nodejs操作mongodb的填删改查模块的制作及引入实例
2018/01/02 NodeJs
vue-cli2.x项目优化之引入本地静态库文件的方法
2018/06/19 Javascript
JS获取指定月份的天数两种实现方法
2018/06/22 Javascript
jQuery UI实现动画效果代码分享
2018/08/19 jQuery
vue组件化中slot的基本使用方法
2019/05/01 Javascript
了解javascript中let和var及const关键字的区别
2019/05/24 Javascript
nodejs处理tcp连接的核心流程
2021/02/26 NodeJs
Python 数据结构之旋转链表
2017/02/25 Python
python方向键控制上下左右代码
2018/01/20 Python
pip install urllib2不能安装的解决方法
2018/06/12 Python
python调用tcpdump抓包过滤的方法
2018/07/18 Python
利用python打开摄像头及颜色检测方法
2018/08/03 Python
对python多线程SSH登录并发脚本详解
2019/02/14 Python
Python实现中值滤波去噪方式
2019/12/18 Python
行政主管岗位职责
2013/11/18 职场文书
开业庆典策划方案
2014/02/18 职场文书
公司股权转让协议书
2014/04/12 职场文书
2014班子成员自我剖析材料思想汇报
2014/10/01 职场文书
2014年幼儿园小班工作总结
2014/12/04 职场文书
思想道德自我评价2015
2015/03/09 职场文书
社区活动总结范文
2015/05/07 职场文书
教你怎么用PyCharm为同一服务器配置多个python解释器
2021/05/31 Python
海弦WR-800F
2022/04/05 无线电