DOMContentLoaded 与 onload 的不同之处在于 DOMContentLoaded 发生在 DOM 加载完毕，但是图片等可能未加载完成的情况。DOMContentLoaded 被除IE外的浏览器支持。针对IE浏览器，也可以模拟这个事件，有两种方案
1、 在页面加一个标签
<script src="//:" defer />
<script type="text/javascript">
//<![CDATA[
var $ = document.getElementById;
var fireDOMReadyEvent = function () {
alert('DOM content loaded');
}
if (!!window.ActiveXObject) {
// Internet Explorer use defer attribute
var src = (window.location.protocol == 'https') ? '://0' : 'javascript:void(0)';
document.write('<SCRIPT id=____dom_content_ready__ src="' + src + '" defer><\/script>');
$('____dom_content_ready__').onreadystatechange = function() {
if (this.readyState == 'complete') {
this.onreadystatechange = null;
fireDOMReadyEvent();
}
};
}
//]]>
</script>
<body>
<img src="verybig.jpg">
</body>
然后检测该脚本的 onreadystatechange，如果为 complete 说明此时 DOM 加载完毕，即 DOMContentLoaded 事件发生。 用 Http watch 工具可以看到像早些版本的 JQuery 和 ExtJS 都会发这么一个请求。最后再删除这个标签即可。一般这个请求花费几毫秒时间。
2、 通过setTiemout来不断的调用documentElement的doScroll方法，如果调用成功则相当 DOMContentLoaded 事件发生。
<script type="text/javascript">
//<![CDATA[
var $ = document.getElementById;
var fireDOMReadyEvent = function () {
window.clearInterval(timer)
alert('DOM content loaded');
}
if (!!window.ActiveXObject) {
// Using doScroll method to instead of script tag to deal with DOM content loaded event
var timer = null;
try {
timer = setInterval(function () {
document.body.doScroll('left');
fireDOMReadyEvent();
});
} catch(ex) {};
}
//]]>
</script>
<img src="verybig.jpg">
分享到：
相关推荐
主要介绍了Javascript封装DOMContentLoaded事件实例,DOMContentLoaded是FF,Opera 9的特有的Event, 当所有DOM解析完以后会触发这个事件,需要的朋友可以参考下
主要介绍了JS兼容所有浏览器的DOMContentLoaded事件的相关资料，标准浏览器中，使用DOMContentLoaded事件即可实现我们的要求，注册事件处理函数也极为简单，感兴趣的朋友一起学习吧
dom-loaded 检查何时加载DOM类似于`DOMContentLoaded`
最近在做性能有关的数据上报，发现了两个非常有意思的东西：Chrome开发者工具的Timeline分析面板，以及DOMContentLoaded事件。一个是强大的令人发指的性能分析工具，一个是重要的性能指标，于是就用Timeline对...
加载了dom 检查DOM是否已像一样加载与DOMContentLoaded不同，这在加载DOM之后包含在内时也适用。安装$ npm install dom-loaded用法import domLoaded from 'dom-loaded' ;await domLoaded ;console . log ( 'The DOM ...
用预算功能显示web性能的扩展(速度索引，DOMContentLoaded，时间到第一个字节) “ Layar Performance”预算会显示具有预算功能的网站性能（RUM速度指数，DOMContentLoaded和TTFB）。 此扩展将在您开发网站时为您提供...
了解DOMContentLoaded为什么如此重要 在DOMContentLoaded上设置一个事件 介绍 使用JavaScript的重要部分是确保您的代码在正确的时间运行。 有时您可能不得不添加一些额外的代码，以确保您的代码在页面准备就绪之前...
了解DOMContentLoaded为什么如此重要 在DOMContentLoaded上设置一个事件 介绍 使用JavaScript的重要部分是确保您的代码在正确的时间运行。 有时您可能不得不添加一些额外的代码，以确保您的代码在页面准备就绪之前...
在文档加载时加载JavaScript学习目标了解DOMContentLoaded为什么如此重要在DOMContentLoaded上设置一个事件介绍使用JavaScript的重要部分是确保您的代码在正确的时间运行。 有时您可能不得不添加一些额外的代码，以...
了解DOMContentLoaded为什么如此重要 在DOMContentLoaded上设置一个事件 介绍 使用JavaScript的重要部分是确保您的代码在正确的时间运行。 有时您可能不得不添加一些额外的代码，以确保您的代码在页面准备就绪之前...
了解DOMContentLoaded为什么如此重要 在DOMContentLoaded上设置一个事件 介绍 使用JavaScript的重要部分是确保您的代码在正确的时间运行。 有时您可能不得不添加一些额外的代码，以确保您的代码在页面准备就绪之前...
3. 触发DOMContentLoaded事件 4. 注入5+ API 5. 触发plusready事件 这样导致5+ API生效时间比较延后，在html中引用js执行之后才能调用5+ API，通常采用以下代码调用5+ API： document.addEventListener('plusready'
代码片段： document.addEventListener("DOMContentLoaded", go);
28种CSS3炫酷loading页面加载动画特效代码，兼容主流浏览器 ...document.addEventListener('DOMContentLoaded', function () { document.querySelector('main').className += 'loaded'; }); </script>
用法：document.addEventListener("DOMContentLoaded", function() { var Highlighter = new window.Highlighter(); Highlighter.next('<div>'); Highlighter.underline(); window.console.log('...
28种CSS3炫酷loading页面加载动画特效代码，兼容主流浏览器 ...document.addEventListener('DOMContentLoaded', function () { document.querySelector('main').className += 'loaded'; }); [removed]
LCP)、可交互时间（Time to Interactive，TTI）、DCL（DOMContentLoaded）、L（Onload）、界面显示速度 SI(Speed Index)、TBT(Total Blocking Time)【总阻塞时间】、FPS、CLS(Cumulative Layout Shift)【累积布局...