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 全角转半角部分
Oct 28 Javascript
jQuery下通过replace字符串替换实现大小图片切换
May 22 Javascript
jQuery的选择器中的通配符使用介绍
Mar 20 Javascript
JavaScript判断用户是否对表单进行了修改的方法
Mar 18 Javascript
浅谈window对象的scrollBy()方法
Jul 15 Javascript
浅谈JavaScript中面向对象的的深拷贝和浅拷贝
Aug 01 Javascript
基于JS实现弹出一个隐藏的div窗口body页面变成灰色并且不可被编辑
Dec 14 Javascript
Bootstrap CSS组件之面包屑导航(breadcrumb)
Dec 17 Javascript
React.Js添加与删除onScroll事件的方法详解
Nov 03 Javascript
VueJs 将接口用webpack代理到本地的方法
Nov 27 Javascript
Node.js+ELK日志规范的实现
May 23 Javascript
Vue 2.0 侦听器 watch属性代码详解
Jun 19 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
收音机鉴频器对声音的影响和频偏分析
2021/03/02 无线电
发布一个用PHP fsockopen写的HTTP下载的类
2007/02/22 PHP
PHP 加密与解密的斗争
2009/04/17 PHP
无刷新动态加载数据 滚动条加载适合评论等页面
2013/10/16 PHP
php实现网站留言板功能
2015/11/04 PHP
46 个非常有用的 PHP 代码片段
2016/02/16 PHP
PHP数组中头部和尾部添加元素的方法(array_unshift,array_push)
2017/04/10 PHP
完美解决在ThinkPHP控制器中命名空间的问题
2017/05/05 PHP
javascript showModalDialog 内跳转页面的问题
2010/11/25 Javascript
基于jQuery的烟花效果(运动相关)点击屏幕出烟花
2012/06/14 Javascript
JavaScript高级程序设计 阅读笔记(十三) js定义类或对象
2012/08/14 Javascript
jquery设置元素的readonly和disabled的写法
2013/09/22 Javascript
javascript 上下banner替换具体实现
2013/11/14 Javascript
javascript的tab切换原理与效果实现方法
2015/01/10 Javascript
Javascript中获取对象的原型对象的方法小结
2015/02/25 Javascript
JavaScript原生节点操作小结
2017/01/17 Javascript
vue使用element-ui的el-input监听不了回车事件的解决方法
2018/01/12 Javascript
小程序云函数调用API接口的方法
2019/05/17 Javascript
产制造追溯系统之通过微信小程序实现移动端报表平台
2019/06/03 Javascript
Vue 刷新当前路由的实现代码
2019/09/26 Javascript
基于js实现数组相邻元素上移下移
2020/05/19 Javascript
你应该知道的python列表去重方法
2017/01/17 Python
Pycharm2017版本设置启动时默认自动打开项目的方法
2018/10/29 Python
python如何查看微信消息撤回
2018/11/27 Python
Python绘制全球疫情变化地图的实例代码
2020/04/20 Python
python基于socket函数实现端口扫描
2020/05/28 Python
scrapy结合selenium解析动态页面的实现
2020/09/28 Python
与UNIX有关的几个名词
2015/09/17 面试题
2014年三八妇女节活动总结
2014/03/01 职场文书
大学自主招生推荐信
2014/05/10 职场文书
小学安全教育月活动总结
2014/07/07 职场文书
医院合作协议书
2014/08/19 职场文书
办公室主任岗位职责
2015/01/31 职场文书
2015年幼儿园后勤工作总结
2015/04/25 职场文书
七年级作文之冬景
2019/11/07 职场文书
Maven学习----Maven安装与环境变量配置教程
2021/06/29 Java/Android