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 相关文章推荐
firefox火狐浏览器与与ie兼容的2个问题总结
Jul 20 Javascript
多个jquery.datatable共存,checkbox全选异常的快速解决方法
Dec 10 Javascript
javascript入门之string对象【新手必看】
Nov 22 Javascript
学习使用bootstrap的modal和carousel
Dec 09 Javascript
ES6通过babel转码使用webpack使用import关键字
Dec 13 Javascript
使用jsonp实现跨域获取数据实例讲解
Dec 25 Javascript
整理关于Bootstrap过渡动画的慕课笔记
Mar 29 Javascript
Node.JS利用PhantomJs抓取网页入门教程
May 19 Javascript
js学习总结之dom2级事件基础知识详解
Jul 27 Javascript
vue-cli3项目展示本地Markdown文件的方法
Jun 07 Javascript
解决vue自定义全局消息框组件问题
Nov 22 Javascript
js实现搜索提示框效果
Sep 05 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
全国FM电台频率大全 - 24 贵州省
2020/03/11 无线电
使用ltrace工具跟踪PHP库函数调用的方法
2016/04/25 PHP
基于ThinkPHP实现的日历功能实例详解
2017/04/15 PHP
Docker搭建自己的PHP开发环境
2018/02/24 PHP
PHP的PDO预定义常量讲解
2019/01/24 PHP
php的lavarel框架中join和orWhere的用法
2020/12/28 PHP
DOM下的节点属性和操作小结
2009/05/14 Javascript
js cookies实现简单统计访问次数
2009/11/24 Javascript
兼容ie、firefox的图片自动缩放的css跟js代码分享
2012/01/21 Javascript
关于JS判断图片是否加载完成且获取图片宽度的方法
2013/04/09 Javascript
父元素与子iframe相互获取变量和元素对象的具体实现
2013/10/15 Javascript
JavaScript中使用Substring删除字符串最后一个字符
2013/11/03 Javascript
Javascript学习笔记之 函数篇(一) : 函数声明和函数表达式
2014/06/24 Javascript
jQuery插件scroll实现无缝滚动效果
2015/04/27 Javascript
angularjs学习笔记之三大模块(modal,controller,view)
2015/09/26 Javascript
js 连续赋值的简单实现
2016/06/13 Javascript
纯js仿淘宝京东商品放大镜功能
2017/03/02 Javascript
jQuery回调方法使用示例
2017/06/26 jQuery
node.js支持多用户web终端实现及安全方案
2017/11/29 Javascript
详解如何构建Promise队列实现异步函数顺序执行
2018/10/23 Javascript
JavaScript作用域链实例详解
2019/01/21 Javascript
JavaScript使用localStorage存储数据
2019/09/25 Javascript
微信小程序报错: thirdScriptError的错误问题
2020/06/19 Javascript
原生js实现购物车
2020/09/23 Javascript
[39:02]DOTA2亚洲邀请赛 3.31 小组赛 B组 Mineski vs VGJ.T
2018/04/01 DOTA
Python 装饰器实现DRY(不重复代码)原则
2018/03/05 Python
浅谈python3发送post请求参数为空的情况
2018/12/28 Python
python 爬取小说并下载的示例
2020/12/07 Python
英国第二大营养品供应商:Vitabiotics
2016/10/01 全球购物
Bed Bath & Beyond加拿大官网:购买床上用品、浴巾、厨房电器等
2019/10/04 全球购物
医院护理人员的自我评价分享
2013/10/04 职场文书
幼儿园教师工作制度
2014/01/22 职场文书
主题酒店策划书
2014/01/28 职场文书
邀请函范文
2015/02/02 职场文书
哈姆雷特读书笔记
2015/06/29 职场文书
python库sklearn常用操作
2021/08/23 Python