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">
分享到：
相关推荐
首先，`DOMContentLoaded`事件是网页DOM树构建完成时触发的事件，它不等待外部资源（如图片、脚本、框架）的加载。这意味着当开发者监听这个事件时，可以安全地操作DOM，因为所有元素都已经存在于文档结构中。这对于...
主要介绍了Javascript封装DOMContentLoaded事件实例,DOMContentLoaded是FF,Opera 9的特有的Event, 当所有DOM解析完以后会触发这个事件,需要的朋友可以参考下
主要介绍了JS兼容所有浏览器的DOMContentLoaded事件的相关资料，标准浏览器中，使用DOMContentLoaded事件即可实现我们的要求，注册事件处理函数也极为简单，感兴趣的朋友一起学习吧
加载了dom 检查DOM是否已像一样加载与DOMContentLoaded不同，这在加载DOM之后包含在内时也适用。安装$ npm install dom-loaded用法import domLoaded from 'dom-loaded' ;await domLoaded ;console . log ( 'The DOM ...
《JS、CSS与img对DOMContentLoaded事件的影响》 在前端开发中，理解DOM（Document Object Model）的加载过程至关重要，特别是DOMContentLoaded事件的触发机制。DOMContentLoaded事件是网页加载过程中的一个重要节点...
window.onload事件是等整个页面完全加载完成后才会触发，这包括所有图片、脚本、样式表、iframe等资源，通常会较晚触发，而DOMContentLoaded仅需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'
`window.onload`和`DOMContentLoaded`是两个关键的事件，用于监听页面加载的不同阶段。它们各自有其应用场景和优势。 首先，`window.onload`事件是在整个页面（包括HTML、CSS、JavaScript、图片和其他外部资源）...
1. **原生DOMContentLoaded事件**：在JavaScript中，可以直接监听DOMContentLoaded事件，当DOM结构加载完毕，但不等待所有资源加载完成后，该事件会被触发。这比等待window.onload事件更快，因为它不会等待图片和...
`DOMContentLoaded`事件会在整个文档解析完毕之后立即触发，而不需要等待诸如图片、样式表等其他资源的加载完成。这使得它非常适合用于在页面内容完全加载后立即运行的脚本。 ### 如何使用DOMContentLoaded事件 ...