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

 更新时间:2006年12月27日 00:00:00   作者:  

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

相关文章

  • js中值类型和引用类型的区别介绍

    js中值类型和引用类型的区别介绍

    这篇文章介绍了js中值类型和引用类型的区别,文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-06-06
  • JavaScript mapreduce工作原理简析

    JavaScript mapreduce工作原理简析

    MapReduce是一个编程模型,用于作业调度,也是一个处理和生成超大数据集的算法模型的相关实现,本文将详细介绍JavaScript mapreduce工作原理,需要的朋友可以参考下
    2012-11-11
  • 国内常用的js类库大全(CDN公共库)

    国内常用的js类库大全(CDN公共库)

    罗列这类js类库希望能帮助到大家,下面类库都支持CDN,所以不用担心速度问题,就算某个节点慢也不会影响全国其他地区的访问速度,支持jQuery,Bootstrap,angular,zepto等js库的CDN地址
    2020-06-06
  • js array数组对象操作方法汇总

    js array数组对象操作方法汇总

    这篇文章主要介绍了js array数组对象操作方法汇总,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-03-03
  • js中getBoundingClientRect( )方法案例详解

    js中getBoundingClientRect( )方法案例详解

    这篇文章主要介绍了js中getBoundingClientRect( )方法案例详解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下
    2021-07-07
  • 新手入门常用代码集锦

    新手入门常用代码集锦

    新手入门常用代码集锦...
    2007-01-01
  • 举例详解Python中smtplib模块处理电子邮件的使用

    举例详解Python中smtplib模块处理电子邮件的使用

    这篇文章主要介绍了举例详解Python中smtplib模块处理电子邮件的使用,是Python入门学习中的基础知识,需要的朋友可以参考下
    2015-06-06
  • 用JS实现一个TreeMenu效果分享

    用JS实现一个TreeMenu效果分享

    用JS实现一个TreeMenu效果分享,思路比较简单,但很实用
    2011-08-08
  • Javascript之Number对象介绍

    Javascript之Number对象介绍

    本文主要介绍javascript中的Number对象的用法,讲解的很详细,希望能给大家做一个参考。
    2016-06-06
  • Javascript Object 对象学习笔记

    Javascript Object 对象学习笔记

    这篇文章主要介绍了Javascript Object 对象学习笔记,需要的朋友可以参考下
    2014-12-12

最新评论