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 相关文章推荐
js几个验证函数代码
Mar 25 Javascript
Javascript学习笔记之函数篇(五) : 构造函数
Nov 23 Javascript
SWFObject基本用法实例分析
Jul 20 Javascript
javascript解析xml实现省市县三级联动的方法
Jul 25 Javascript
浅析jQuery Ajax请求参数和返回数据的处理
Feb 24 Javascript
Javascript将字符串日期格式化为yyyy-mm-dd的方法
Oct 27 Javascript
jQuery.Form上传文件操作
Feb 05 Javascript
详谈$.data()的用法和作用
Feb 13 Javascript
vue组件实现弹出框点击显示隐藏效果
Oct 26 Javascript
详解React+Koa实现服务端渲染(SSR)
May 23 Javascript
vue两个组件间值的传递或修改方式
Jul 04 Javascript
浅谈微信页面入口文件被缓存解决方案
Sep 29 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 数学运算验证码实现代码
2009/10/11 PHP
Apache启动报错No space left on device: AH00023该怎么解决
2015/10/16 PHP
javascript实现的基于金山词霸网络翻译的代码
2010/01/15 Javascript
javascript实现依次输入input自动定焦
2014/12/23 Javascript
window.onerror()的用法与实例分析
2016/01/27 Javascript
分享JS数组求和与求最大值的方法
2016/08/11 Javascript
JavaScript易错知识点整理
2016/12/05 Javascript
ng2学习笔记之bootstrap中的component使用教程
2017/03/09 Javascript
vue 2.0路由之路由嵌套示例详解
2017/05/08 Javascript
浅谈angular.js跨域post解决方案
2017/08/30 Javascript
浅谈Vue网络请求之interceptors实际应用
2018/02/28 Javascript
详解js跨域请求的两种方式,支持post请求
2018/05/05 Javascript
200行HTML+JavaScript实现年会抽奖程序
2019/01/22 Javascript
JS实现横向轮播图(初级版)
2020/06/24 Javascript
解决vue项目axios每次请求session不一致的问题
2020/10/24 Javascript
vue 在单页面应用里使用二级套嵌路由
2020/12/19 Vue.js
python解决字典中的值是列表问题的方法
2013/03/04 Python
python解析模块(ConfigParser)使用方法
2013/12/10 Python
Python读取ini文件、操作mysql、发送邮件实例
2015/01/01 Python
python文字和unicode/ascll相互转换函数及简单加密解密实现代码
2019/08/12 Python
详解python列表(list)的使用技巧及高级操作
2019/08/15 Python
Python3+Selenium+Chrome实现自动填写WPS表单
2020/02/12 Python
Python3之外部文件调用Django程序操作model等文件实现方式
2020/04/07 Python
matplotlib.pyplot.matshow 矩阵可视化实例
2020/06/16 Python
Python importlib模块重载使用方法详解
2020/10/13 Python
python中子类与父类的关系基础知识点
2021/02/02 Python
详解使用scrapy进行模拟登陆三种方式
2021/02/21 Python
总经理职责
2013/12/22 职场文书
合伙协议书范本
2014/04/21 职场文书
桥梁工程专业求职信
2014/04/21 职场文书
2014镇副书记群众路线专题民主生活会思想汇报
2014/09/23 职场文书
乡镇防汛工作汇报
2014/10/28 职场文书
关于拾金不昧的感谢信
2015/01/21 职场文书
2016年度师德标兵先进事迹材料
2016/02/26 职场文书
基于Python实现流星雨效果的绘制
2022/03/18 Python
剑指Offer之Java算法习题精讲二叉树专项训练
2022/03/21 Java/Android