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 相关文章推荐
使用jQueryMobile实现滑动翻页效果的方法
Feb 04 Javascript
jquery+easeing实现仿flash的载入动画
Mar 10 Javascript
Vuejs第十二篇之动态组件全面解析
Sep 09 Javascript
angular源码学习第一篇 setupModuleLoader方法
Oct 20 Javascript
VueJs与ReactJS和AngularJS的异同点
Dec 12 Javascript
Angular directive递归实现目录树结构代码实例
May 05 Javascript
详谈js对url进行编码和解码(三种方式的区别)
Aug 16 Javascript
Angular实现双向折叠列表组件的示例代码
Nov 21 Javascript
vue获取dom元素注意事项
Dec 28 Javascript
JavaScript 对引擎、运行时、调用堆栈的概述理解
Oct 22 Javascript
vue elementui el-form rules动态验证的实例代码详解
May 23 Javascript
小程序websocket心跳库(websocket-heartbeat-miniprogram)
Feb 23 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
openflashchart 2.0 简单案例php版
2012/05/21 PHP
CI框架源码解读之利用Hook.php文件完成功能扩展的方法
2016/05/18 PHP
thinkphp3.2中实现phpexcel导出带生成图片示例
2017/02/14 PHP
javascript 动态修改样式和层叠样式表代码
2010/04/27 Javascript
用js实现的模拟jquery的animate自定义动画(2.5K)
2010/07/20 Javascript
javascript 在firebug调试时用console.log的方法
2012/05/10 Javascript
js清空form表单中的内容示例
2014/05/20 Javascript
jquery、js调用iframe父窗口与子窗口元素的方法整理
2014/07/31 Javascript
js实现checkbox全选、不选与反选的方法
2015/02/09 Javascript
jquery实现鼠标滑过小图查看大图的方法
2015/07/20 Javascript
jQuery无刷新分页完整实例代码
2015/10/27 Javascript
BootStrap扔进Django里的方法详解
2016/05/13 Javascript
Javascript 引擎工作机制详解
2016/11/30 Javascript
理解javascript中的Function.prototype.bind的方法
2017/02/03 Javascript
vue-cli axios请求方式及跨域处理问题
2018/03/28 Javascript
解决element UI 自定义传参的问题
2018/08/22 Javascript
脚手架vue-cli工程webpack的作用和特点
2018/09/29 Javascript
浅谈Javascript常用正则表达式应用
2019/03/08 Javascript
Vue实现浏览器打印功能的代码
2020/04/17 Javascript
鸿蒙系统中的 JS 开发框架
2020/09/18 Javascript
python之wxPython菜单使用详解
2014/09/28 Python
Python 中的range(),以及列表切片方法
2018/07/02 Python
Selenium元素的常用操作方法分析
2018/08/10 Python
django多对多表的创建,级联删除及手动创建第三张表
2019/07/25 Python
Python datetime包函数简单介绍
2019/08/28 Python
Python API自动化框架总结
2019/11/12 Python
使用 PyTorch 实现 MLP 并在 MNIST 数据集上验证方式
2020/01/08 Python
python集合的新增元素方法整理
2020/12/07 Python
简单聊聊H5的pushState与replaceState的用法
2018/04/03 HTML / CSS
Maison Lab荷兰:名牌Outlet购物
2018/08/10 全球购物
五年级音乐教学反思
2014/02/06 职场文书
颁奖晚会主持词
2014/03/25 职场文书
大学社团活动总结
2014/04/26 职场文书
手术室护士个人总结
2015/02/13 职场文书
销售人员管理制度
2015/08/06 职场文书
Python Numpy之linspace用法说明
2021/04/17 Python