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下利用fso判断文件是否存在的代码
Dec 11 Javascript
《JavaScript高级程序设计》阅读笔记(二) ECMAScript中的原始类型
Feb 27 Javascript
JQuery入门——移除绑定事件unbind方法概述及应用
Feb 05 Javascript
基于JQuery 滑动与动画的说明介绍
Apr 18 Javascript
JS:window.onload的使用介绍
Nov 13 Javascript
浅析JavaScript原型继承的陷阱
Dec 03 Javascript
JavaScript编写棋盘覆盖代码详解
Aug 28 Javascript
深入理解vuex2.0 之 modules
Nov 20 Javascript
Nuxt.js实战详解
Jan 18 Javascript
使用vue.js在页面内组件监听scroll事件的方法
Sep 11 Javascript
对Vue.js之事件的绑定(v-on: 或者 @ )详解
Sep 15 Javascript
javascript实现倒计时提示框
Mar 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
Eclipse的PHP插件PHPEclipse安装和使用
2014/07/20 PHP
php选择排序法实现数组排序实例分析
2015/02/16 PHP
Laravel 5 框架入门(一)
2015/04/09 PHP
PHP检测一个数组有没有定义的方法步骤
2019/07/20 PHP
javascript 拖动表格行实现代码
2011/05/05 Javascript
javascript学习笔记(十) js对象 继承
2012/06/19 Javascript
js如何调用qq互联api实现第三方登录
2014/03/28 Javascript
5个JavaScript经典面试题
2014/10/13 Javascript
javascript实现倒计时N秒后网页自动跳转代码
2014/12/11 Javascript
javascript实现节点(div)名称编辑
2014/12/17 Javascript
JavaScript中常用的六种互动方法示例
2015/03/13 Javascript
jQuery获取cookie值及删除cookie用法实例
2016/04/15 Javascript
js动态添加的DIV中的onclick事件简单实例
2016/07/25 Javascript
原生JS实现圣旨卷轴展开效果
2017/03/06 Javascript
原生Aajax 和jQuery Ajax 写法个人总结
2017/03/24 jQuery
webpack配置的最佳实践分享
2017/04/21 Javascript
node.js 抓取代理ip实例代码
2017/04/30 Javascript
浅谈vue同一页面中拥有两个表单时,的验证问题
2018/09/18 Javascript
vue实现的仿淘宝购物车功能详解
2019/01/27 Javascript
微信小程序实现获取用户信息并存入数据库操作示例
2019/05/07 Javascript
Vue设置长时间未操作登录自动到期返回登录页
2020/01/22 Javascript
原生JS实现微信通讯录
2020/06/18 Javascript
js将日期格式转换为YYYY-MM-DD HH:MM:SS
2020/09/18 Javascript
python中OrderedDict的使用方法详解
2017/05/05 Python
python基于ID3思想的决策树
2018/01/03 Python
快速了解Python中的装饰器
2018/01/11 Python
用Django实现一个可运行的区块链应用
2018/03/08 Python
对Python字符串中的换行符和制表符介绍
2018/05/03 Python
python 如何快速复制序列
2020/09/07 Python
学校元旦晚会开场白
2014/12/14 职场文书
大学生违纪检讨书范文
2015/05/07 职场文书
农村结婚典礼主持词
2015/06/29 职场文书
公务员爱岗敬业心得体会
2016/01/25 职场文书
公文写作:工伤事故分析报告怎么写?
2019/11/05 职场文书
字节飞书面试promise.all实现示例
2022/06/16 Javascript
css让页脚保持在底部位置的四种方案
2022/07/23 HTML / CSS