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 animate 动画效果使用说明
Nov 04 Javascript
ASP.NET jQuery 实例13 原创jQuery文本框字符限制插件-TextArea Counter
Feb 03 Javascript
jQuery获得内容和属性方法及示例
Dec 02 Javascript
JS建造者模式基本用法实例分析
Jun 30 Javascript
使用CamanJS在Web页面上处理图像的技巧
Aug 18 Javascript
JS实现的简单鼠标跟随DiV层效果完整实例
Oct 31 Javascript
vue + socket.io实现一个简易聊天室示例代码
Mar 06 Javascript
jquery 禁止鼠标右键并监听右键事件
Apr 27 jQuery
webpack手动配置React开发环境的步骤
Jul 02 Javascript
详解基于Wepy开发小程序插件(推荐)
Aug 01 Javascript
Vue解析剪切板图片并实现发送功能
Feb 04 Javascript
Vue3配置axios跨域实现过程解析
Nov 25 Vue.js
使用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源代码
2006/10/09 PHP
php 前一天或后一天的日期
2008/06/28 PHP
求PHP数组最大值,最小值的代码
2011/10/31 PHP
PHP获取指定月份第一天和最后一天的方法
2015/07/18 PHP
分享3个php获取日历的函数
2015/09/25 PHP
PHP接口继承及接口多继承原理与实现方法详解
2017/10/18 PHP
splice slice区别
2006/10/09 Javascript
javascript 读取XML数据,在页面中展现、编辑、保存的实现
2009/10/27 Javascript
prototype 中文参数乱码解决方案
2009/11/09 Javascript
jQuery入门第一课 jQuery选择符
2010/03/14 Javascript
JavaScript 变量作用域分析
2011/07/04 Javascript
深入理解JavaScript系列(14) 作用域链介绍(Scope Chain)
2012/04/12 Javascript
js实现jquery的offset()方法实例
2015/01/10 Javascript
javascript实现状态栏文字首尾相接循环滚动的方法
2015/07/22 Javascript
老生常谈遮罩层 滚动条的问题
2016/04/29 Javascript
AngularJS基础 ng-class-odd 指令示例
2016/08/01 Javascript
js前端解决跨域问题的8种方案(最新最全)
2016/11/18 Javascript
浅析JavaScriptSerializer类的序列化与反序列化
2016/11/22 Javascript
原生Aajax 和jQuery Ajax 写法个人总结
2017/03/24 jQuery
vue 表单输入框不支持focus及blur事件的解决方案
2020/11/17 Vue.js
[01:05:56]2018DOTA2亚洲邀请赛3月29日 小组赛A组 Newbee VS VG
2018/03/30 DOTA
python正则匹配查询港澳通行证办理进度示例分享
2013/12/27 Python
Python使用统计函数绘制简单图形实例代码
2019/05/15 Python
python3 property装饰器实现原理与用法示例
2019/05/15 Python
使用Python脚本从文件读取数据代码实例
2020/01/19 Python
python 贪心算法的实现
2020/09/18 Python
巴西备受欢迎的服装和生活方式品牌:FARM Rio
2020/02/04 全球购物
法学毕业生自荐信
2013/11/13 职场文书
产品销售员岗位职责
2013/12/18 职场文书
CAD制图设计师自荐信
2014/01/29 职场文书
踏青活动策划方案
2014/08/19 职场文书
党员自我剖析材料范文
2014/10/06 职场文书
小型婚礼主持词
2015/06/30 职场文书
2016元旦文艺汇演主持词
2015/07/06 职场文书
关于JS中的作用域中的问题思考分享
2022/04/06 Javascript
Win11 BitLocker 驱动器加密
2022/04/19 数码科技