论坛首页 Web前端技术论坛

再谈一下DOMContentLoad事件

浏览 4832 次
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
   发表时间:2007-06-23  
这个问题算是个老问题了。
所以,标题加上一个再字。

我主要说一下模拟这个事件时候容易出现的问题。

对于FF,Opera9,原生DOMContentLoad支持,就不说了,最头疼的是IE。
我最初考虑这个问题的时候,想到的是document的readyState属性。
偷窥一下Dojo的源码,发现它也是基于这个属性去做的,那时,我基本就认准了这个方法。
于是再后来JSI1和JSI2早期的预览版本中,都是基于这个属性做的,后来,有个朋友向我反应,说JSI的装饰引擎在IE上启动比FF慢很多,我当时就猜测,是否是这个DOMContentLoad的问题。

经过测试,发现,确实,readyState必须等待图片装载完成之后才能置为complete。
于是到网上搜索一下其他办法,最终 Dean Edwards的blog上描述的一个基于script defer属性的解决办法胜出:http://dean.edwards.name/weblog/category/dom/onload/
不过,使用document.write打印一段脚本,我真的不喜欢:(

在评论里面我们可以看到一些其他的建议,有人认为 readyState == 'complete' 加 readyState==‘interactive’这个状态可以准确模拟DOMContentLoad。我开始简单测试一下,貌似可行,但是后来发现 readyState==‘interactive’可能受alert等函数影响,就是说,一般情况下,readyState==‘interactive’时,dom是装载完了的,但是,当你文档装载过程中,调用了alert函数,那么,readyState将提前置为 ‘interactive’。

总之,目前来说,我知道的,只有两个办法可以真正实现IE上模拟DOMContentLoad
    1.htc ondocumentready(需要额外的HTC文件)
    2.script defer(必须使用document.write打印一段脚本标记,jquery目前采用的方式)

最常见的一个错误:
    document.readyState(Dojo目前(0.4.1)采用的方式)


再说一下JSI的DOMContentLoad实现的使用接口。


}#EventUtil.addDOMReadyListener"]js.html.EventUtil.addDOMReadyListener(<Function>listener ,<boolean>runAnyCase )

第二个参数用于确保listener 在任何时候都会被调用(FF DOMContentLoad事件如果在事件发生之后设置listener是无效的)
   发表时间:2007-06-23  
好贴。
当初我在项目中也经历了同样的过程,起初通过readyState来模拟,但很快发现了性能问题。
0 请登录后投票
   发表时间:2007-06-23  
Safari 更恶心,还得构造一 setInterval

http://www.thefutureoftheweb.com/blog/adddomloadevent
0 请登录后投票
   发表时间:2007-06-24  
radar 写道
Safari 更恶心,还得构造一 setInterval


Safari 好在通过readyState可以准确模拟domcontentload,所以,怎么的我感觉比IE要好些。
0 请登录后投票
   发表时间:2007-06-25  
嗯。对于ie,我个人是使用htc的。因为我写了一个iepatch,本来就要用htc,来实现透明png、css multiclass、某些常用伪类(如focus)的模拟。

我还有一种方法,示意代码如下:

<html>
...
<body>
....
<script>fireEvent('DOMContentLoad');</script>
</body>
</html>

呵呵,不准扁我。。。


其实对于某些服务器端方案(比方说最简单的头尾文件),上面这个最简单。
0 请登录后投票
论坛首页 Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics