这个问题算是个老问题了。
所以,标题加上一个再字。
我主要说一下模拟这个事件时候容易出现的问题。
对于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是无效的)
分享到:
相关推荐
浏览器事件调试器 对于那些您不知道谁在页面上添加事件侦听器的时刻。 browser-event-debugger使您可以查看要添加/删除的事件,从何处(堆栈跟踪)以及在哪些元素上添加/删除... addEventListener ( "DOMContentLoad
在标准浏览器中,如Chrome、Firefox、Safari和现代版本的Internet Explorer,可以直接使用`document.addEventListener('DOMContentLoaded', fn, false)`来监听DOMContentLoad事件,并在DOM准备就绪时执行指定的函数`...
`DOMContentLoad`事件确保在执行脚本前,HTML已经完全加载。当点击表头时,`sorttab.js`会根据当前列的排序状态(通过CSS类`asc`判断)决定升序还是降序排序,并更新表格内容。 此外,"用法.txt"文件可能包含了关于...
- DOMContentLoad事件在不同浏览器中有所差异,如IE可以使用defer属性或者document.documentElement.doScroll()。 - 在Firefox中,使用DOMContentLoad事件来检测文档加载完成。 - 当DOM元素数量庞大时,某些方法...
// 方案一:监听DOMContentLoad事件 document.addEventListener('DOMContentLoaded', (event) => { console.log('first contentful painting'); }); // 方案二:使用performance API performance.getEntriesByName...
2020年奥运会 生成2020年奥林匹克运动会的标志。 用法 npm i @all-user/olympic2020 < head > < script src =" path/to/olympic2020/dist/bundle.js " >... addEventListener ( 'DOMContentLoad