ie和firefox中img对象区别的困惑

在调试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对于此事件是异步的。

赞 (0)

相关推荐

  • ie和firefox中img对象区别的困惑

    在调试js时遇到一些恶心的问题,于是做了一个测试程序,放到网上让大家帮我测试.帖子见http://vchelp.net/cndevforum/subject_view.asp?page=-1&subject_id=165791 下面我给出关于测试的解释: 起因源于我想做这么一个网页:用户上传一个图片后,如果图片大于500象素,则在客户端把图片缩小成500象素大小.但是不想让用户看到这个大小调整过程.于是想首先隐藏这个图片,在整个网页下载完成后,调整大小,然后再显示调整好的图像. 于是我首先设置i

  • IE与FireFox中的childNodes区别

    Javascript中,相信大家都试过用getElementsByTagName和childNodes来实现对节点的遍历.但是 getElementsByTagName对复杂的DOM结构遍历明显不如用childNodes,因为childNodes能更好的处理DOM的层次结构,建议在需要进行了遍历时首先使用childNodes!! 但是不幸的是,在IE和FireFox中childNodes有点细微的差别: 复制代码 代码如下: <head> <script type="text/

  • javascript css在IE和Firefox中区别分析

    一.document.formName.item("itemName") 问题  问题说明:IE下,可以使用 document.formName.item("itemName") 或 document.formName.elements ["elementName"]:Firefox下,只能使用document.formName.elements["elementName"]. 解决方法:统一使用document.formNa

  • 怎样才能用js生成xmldom对象，并且在firefox中也实现xml数据岛？

    一般来说,xml文件都是从外部载入的,那么我们如何只用js生成xml对象呢?下面的程序实现了这一点,只需要输入字符串形式的xml数据,就可以转换为xml对象,并且兼容firefox. 用这种方法,我们也可以在firefox中实现xml数据岛,即用xmp标签来装载xml字符串,然后调用createXml函数来生成xml.    由于firefox中不支持节点的.xml属性,所以需要给它添加该属性,使之与IE一致 复制代码 代码如下: <body> <xmp id=x1>     &l

  • Javascript在IE和FireFox中的不同表现简析

    1.document.formName.item("itemName") 问题 说明:IE下,可以使用document.formName.item("itemName")或document.formName.elements["elementName"];Firefox下,只能使用document.formName.elements["elementName"]. 解决方法:统一使用document.formName.elem

  • Firefox中使用outerHTML的2种解决方法

    Firefox中使用outerHTML的2种解决方法

    对于DOM对象的innerHTML属性想必大家都不会陌生,但是outerHTML用起来相对于会少一点了,innerHTML属性返回的是DOM对象从开始标签到结束标签中所包含的HTML,而outerHTML属性返回的是包括DOM对象本身标签在内的HTML,下图能很好的解释两个属性的区别: outerHTML最开始是属于IE的私有属性,可以查看MSDN上的说明:outerHTML Property(http://msdn.microsoft.com/en-us/library/ms534310(VS

  • Javascript中的对象和原型(二)

    在上篇文章中JavaScript中的对象和原型(一)提到了JavaScript中对象的创建的一些基本操作,接下来讨论下继续讨论. 一 工厂模式 我们知道,要创建一个对象我们可以用如下代码: var user = new Object(); //使用new运算符创建一个对象 user.name = '念在三角湖畔'; //给对象添加属性 user.age = 22; user.address = '湖北武汉'; alert(user.name + " " +user.age);//返回

  • JavaScript中判断对象类型的几种方法总结

    我们知道,JavaScript中检测对象类型的运算符有:typeof.instanceof,还有对象的constructor属性: 1) typeof 运算符 typeof 是一元运算符,返回结果是一个说明运算数类型的字符串.如:"number","string","boolean","object","function","undefined"(可用于判断变量是否存在). 但 type

  • 深入探究AngularJS框架中Scope对象的超级教程

    深入探究AngularJS框架中Scope对象的超级教程

    一.遇到的问题 问题发生在使用 AngularJS 嵌套 Controller 的时候.因为每个 Controller 都有它对应的 Scope(相当于作用域.控制范围),所以 Controller 的嵌套,也就意味着 Scope 的嵌套.这个时候如果两个 Scope 内都有同名的 Model 会发生什么呢?从子 Scope 怎样更新父 Scope 里的 Model 呢? 这个问题很典型,比方说当前页面是一个产品列表,那么就需要定义一个 ProductListController functio

  • js中json对象和字符串的理解及相互转化操作实现方法

    本文实例讲述了js中json对象和字符串的理解及相互转化操作实现方法.分享给大家供大家参考,具体如下: <script> var str="{'strv':["+ "{'a':'a11'},"+ " {'a':'b222'}"+ " ]}"; //如果放在一行更清楚:var str="{'strv':[{'a':'a11'}, {'a':'b222'} ]}"; var str2=eval('(

随机推荐