`
jindw
  • 浏览: 509810 次
  • 性别: Icon_minigender_1
  • 来自: 初到北京
社区版块
存档分类
最新评论

再谈一下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是无效的)
分享到:
评论
4 楼 hax 2007-06-25  
嗯。对于ie,我个人是使用htc的。因为我写了一个iepatch,本来就要用htc,来实现透明png、css multiclass、某些常用伪类(如focus)的模拟。

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

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

呵呵,不准扁我。。。


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


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

http://www.thefutureoftheweb.com/blog/adddomloadevent
1 楼 netfishx 2007-06-23  
好贴。
当初我在项目中也经历了同样的过程,起初通过readyState来模拟,但很快发现了性能问题。

相关推荐

    browser-event-debugger:对于那些您不知道谁在页面上添加事件侦听器的时刻

    浏览器事件调试器 对于那些您不知道谁在页面上添加事件侦听器的时刻。 browser-event-debugger使您可以查看要添加/删除的事件,从何处(堆栈跟踪)以及在哪些元素上添加/删除... addEventListener ( "DOMContentLoad

    JS兼容所有浏览器的DOMContentLoaded事件

    在标准浏览器中,如Chrome、Firefox、Safari和现代版本的Internet Explorer,可以直接使用`document.addEventListener('DOMContentLoaded', fn, false)`来监听DOMContentLoad事件,并在DOM准备就绪时执行指定的函数`...

    js实现点击table表头字段,根据字段排序例子

    `DOMContentLoad`事件确保在执行脚本前,HTML已经完全加载。当点击表头时,`sorttab.js`会根据当前列的排序状态(通过CSS类`asc`判断)决定升序还是降序排序,并更新表格内容。 此外,"用法.txt"文件可能包含了关于...

    [转]去百度面试的javascript 收获

    - DOMContentLoad事件在不同浏览器中有所差异,如IE可以使用defer属性或者document.documentElement.doScroll()。 - 在Firefox中,使用DOMContentLoad事件来检测文档加载完成。 - 当DOM元素数量庞大时,某些方法...

    前端大厂最新面试题-first_page_time.docx

    // 方案一:监听DOMContentLoad事件 document.addEventListener('DOMContentLoaded', (event) =&gt; { console.log('first contentful painting'); }); // 方案二:使用performance API performance.getEntriesByName...

    olympic2020:2020年产生奥运会徽

    2020年奥运会 生成2020年奥林匹克运动会的标志。 用法 npm i @all-user/olympic2020 &lt; head &gt; &lt; script src =" path/to/olympic2020/dist/bundle.js " &gt;... addEventListener ( 'DOMContentLoad

Global site tag (gtag.js) - Google Analytics