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 相关文章推荐
innerHTML,outerHTML,innerTEXT三者之间的区别
Jan 28 Javascript
用dom+xhtml+css制作的一个相册效果代码打包下载
Jan 24 Javascript
JS和jquery获取各种屏幕的宽度和高度的代码
Aug 02 Javascript
教你如何使用PHP输出中文JSON字符串
May 22 Javascript
5个数组Array方法: indexOf、filter、forEach、map、reduce使用实例
Jan 29 Javascript
JS设置cookie、读取cookie、删除cookie
Apr 17 Javascript
JQuery核心函数是什么及使用方法介绍
May 03 Javascript
jQuery延迟执行的实现方法
Dec 21 Javascript
tsconfig.json配置详解
May 17 Javascript
Node.js爬虫如何获取天气和每日问候详解
Aug 26 Javascript
webpack的 rquire.context用法实现工程自动化的方法
Feb 07 Javascript
微信小程序学习总结(四)事件与冒泡实例分析
Jun 04 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函数memory_get_usage获取PHP内存清耗量的方法
2011/12/06 PHP
windows环境下php配置memcache的具体操作步骤
2013/06/09 PHP
PHP 中TP5 Request 请求对象的实例详解
2017/07/31 PHP
PHP正则之正向预查与反向预查讲解与实例
2020/04/06 PHP
JavaScript 嵌套函数指向this对象错误的解决方法
2010/03/15 Javascript
使用bootstrap插件实现模态框效果
2017/05/10 Javascript
BootStrap模态框不垂直居中的解决方法
2017/10/19 Javascript
微信小程序上传图片功能(附后端代码)
2020/06/19 Javascript
详解mpvue开发小程序小总结
2018/07/25 Javascript
使用vue自定义指令开发表单验证插件validate.js
2019/05/23 Javascript
JS函数动态传递参数的方法分析【基于arguments对象】
2019/06/05 Javascript
node实现简单的增删改查接口实例代码
2019/08/22 Javascript
微信小程序跨页面传递data数据方法解析
2019/12/13 Javascript
[41:12]Liquid vs Secret 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.24
2019/09/10 DOTA
在Python中使用itertools模块中的组合函数的教程
2015/04/13 Python
python实现人脸识别经典算法(一) 特征脸法
2018/03/13 Python
python中使用PIL制作并验证图片验证码
2018/03/15 Python
Python3.6连接Oracle数据库的方法详解
2018/05/18 Python
Python continue继续循环用法总结
2018/06/10 Python
Python I/O与进程的详细讲解
2019/03/08 Python
Python 内置函数globals()和locals()对比详解
2019/12/23 Python
Python3标准库glob文件名模式匹配的问题
2020/03/13 Python
python 删除系统中的文件(按时间,大小,扩展名)
2020/11/19 Python
结合 CSS3 transition transform 实现简单的跑马灯效果的示例
2018/02/07 HTML / CSS
欧洲最大的化妆品连锁公司:Douglas道格拉斯
2017/05/06 全球购物
Nice Kicks网上商店:ShopNiceKicks.com
2018/12/25 全球购物
北美最大的参茸药食商城:德成行
2020/12/06 全球购物
专科毕业生求职简历的自我评价
2013/10/12 职场文书
大学生实习思想汇报
2014/01/12 职场文书
2014村务公开实施方案
2014/02/25 职场文书
会计人员岗位职责
2014/03/19 职场文书
某某同志考察材料
2014/05/28 职场文书
员工担保书范本
2015/09/22 职场文书
PyTorch 实现L2正则化以及Dropout的操作
2021/05/27 Python
python实现简单的三子棋游戏
2022/04/28 Python
SpringBoot项目多数据源及mybatis 驼峰失效的问题解决方法
2022/07/07 Java/Android