2007-06-23

再谈一下DOMContentLoad事件

这个问题算是个老问题了。
所以，标题加上一个再字。

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

对于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是无效的）
评论
hax 2007-06-25
嗯。对于ie，我个人是使用htc的。因为我写了一个iepatch，本来就要用htc，来实现透明png、css multiclass、某些常用伪类（如focus）的模拟。

我还有一种方法，示意代码如下：

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

呵呵，不准扁我。。。


其实对于某些服务器端方案（比方说最简单的头尾文件），上面这个最简单。
jindw 2007-06-24
radar 写道
Safari 更恶心，还得构造一 setInterval


Safari 好在通过readyState可以准确模拟domcontentload，所以，怎么的我感觉比IE要好些。
radar 2007-06-23
Safari 更恶心，还得构造一 setInterval

http://www.thefutureoftheweb.com/blog/adddomloadevent
netfishx 2007-06-23
好贴。
当初我在项目中也经历了同样的过程，起初通过readyState来模拟，但很快发现了性能问题。
jindw
  • 浏览: 203622 次
  • 性别: Icon_minigender_1
  • 来自: 初到北京
  • 详细资料
搜索本博客
存档
最新评论