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里选择超链接的实现代码
May 22 Javascript
TextArea不支持maxlength的解决办法(jquery)
Sep 13 Javascript
JavaScript之引用类型介绍
Aug 10 Javascript
EasyUI,点击开启编辑框,并且编辑框获得焦点的方法
Mar 01 Javascript
JavaScript基础之AJAX简单的小demo
Jan 29 Javascript
Vue服务端渲染和Vue浏览器端渲染的性能对比(实例PK )
Mar 31 Javascript
jQuery模拟实现天猫购物车动画效果实例代码
May 25 jQuery
js排序与重组的实例讲解
Aug 28 Javascript
10种JavaScript最常见的错误(小结)
Jun 21 Javascript
localstorage实现带过期时间的缓存功能
Jun 28 Javascript
vue 解决路由只变化参数页面组件不更新问题
Nov 05 Javascript
JavaScript如何实现监听键盘输入和鼠标监点击
Jul 20 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/01 无线电
浅析关于PHP位运算的简单权限设计
2013/06/30 PHP
解析array splice的移除数组中指定键的值,返回一个新的数组
2013/07/02 PHP
用php守护另一个php进程的例子
2015/02/13 PHP
thinkphp框架实现删除和批量删除
2016/06/29 PHP
PHP设计模式之工厂模式与单例模式
2016/09/28 PHP
php实现生成带二维码图片并强制下载功能
2018/02/24 PHP
PHP实现的mysql读写分离操作示例
2018/05/22 PHP
六款帮助你实现惊艳视差滚动效果的jQuery插件
2012/09/14 Javascript
javascript实现的元素拖动函数宿主为浏览器
2014/07/21 Javascript
JavaScript字符串对象toUpperCase方法入门实例(用于把字母转换为大写)
2014/10/17 Javascript
jQuery获取checkboxlist的value值的方法
2015/09/27 Javascript
JavaScript编写点击查看大图的页面半透明遮罩层效果实例
2016/05/09 Javascript
深入剖析javascript中的exec与match方法
2016/05/18 Javascript
第四篇Bootstrap网格系统偏移列和嵌套列
2016/06/21 Javascript
从零开始封装自己的自定义Vue组件
2018/10/09 Javascript
[06:04]DOTA2英雄梦之声Vol19卓尔游侠
2014/06/20 DOTA
利用Anaconda完美解决Python 2与python 3的共存问题
2017/05/25 Python
python批量替换页眉页脚实例代码
2018/01/22 Python
详解Python安装scrapy的正确姿势
2018/06/26 Python
python的slice notation的特殊用法详解
2019/12/27 Python
Python编程快速上手——Excel表格创建乘法表案例分析
2020/02/28 Python
使用python-Jenkins批量创建及修改jobs操作
2020/05/12 Python
几个CSS3的flex弹性盒模型布局的简单例子演示
2016/05/12 HTML / CSS
英国男女豪华配饰和礼品网站:Black.co.uk
2020/02/28 全球购物
在网络中有两台主机A和B,并通过路由器和其他交换设备连接起来,已经确认物理连接正确无误,怎么来测试这两台机器是否连通?如果不通,怎么来判断故障点?怎么排
2014/01/13 面试题
元旦晚会邀请函
2014/02/01 职场文书
薪酬专员岗位职责
2014/02/18 职场文书
《乞巧》教学反思
2014/02/27 职场文书
春风行动实施方案
2014/03/28 职场文书
《窗前的气球》教学反思
2014/04/07 职场文书
三八妇女节标语
2014/10/09 职场文书
2014幼儿园大班工作总结
2014/11/10 职场文书
教师工作能力自我评价
2015/03/04 职场文书
2019年大学生职业生涯规划书最新范文
2019/03/25 职场文书
使用Python拟合函数曲线
2022/04/14 Python