DOMContentLoaded事件和加载事件之间的区别

260

DOMContentLoaded和load事件有什么区别？

javascript browser

— 维克多
source

一篇不错的文章- 页面生命周期：DOMContentLoaded，加载，beforeunload，unload。

— georgeawg

191

从Mozilla开发人员中心：

当文档已经完全加载和解析时，将触发DOMContentLoaded事件，而无需等待样式表，图像和子帧完成加载（可以使用load事件来检测完全加载的页面）。

— 西蒙·利希克（Simon Lieschke）
source

27

顺便说一句，相同的MDN链接[现在]也说：“注意：样式表加载块脚本执行，因此，如果在<link rel =“ stylesheet” ...>之后有一个<script>，该页面将无法完成解析-并且DOMContentLoaded将不会触发-直到加载样式表。”

— 尼克，

10

@Nick此页面提供了原因。html5rocks.com/en/tutorials/internals/howbrowserswork我还是建议您观看页面中的视频。

— abhisekp

1

@abhisekp不错的教程，尽管该视频链接现在已经过时了

— supi

因此，在触发DOMContentLoaded之后，将构建渲染树。但是DOMContentLoaded不会根据developer.mozilla.org/en-US/docs/Web/API/Window/…等待图像/子资源/子帧完成加载。您是否知道这些图像/子帧/子资源是在构建后由渲染树调用的，还是在仍在构建渲染树时由DOM树调用的？换句话说，渲染树是否触发了一系列连接来下载这些图像/子帧/子资源，或者它们的下载之前已经在进行中？

— weefwefwqg3

83

DOMContentLoaded一旦完全构建了DOM层次结构，就会触发该load事件，当所有图像和子帧均已加载完成时，该事件就会触发。

DOMContentLoaded将可在大多数现代浏览器上使用，~~但不适用于~~包括IE9及更高版本的IE。有一些替代方法可以在IE的较早版本上模拟此事件，例如jQuery库中使用的替代方法，它们会附加IE特定的 onreadystatechange事件。

— 内容管理系统
source

7

您说“此事件”时指的是哪个事件？

— Tom Hubbard

2

“此事件” = DOMContentLoaded。在IE8中不起作用。如果您需要支持，请使用CMS链接到的解决方法

— Jan Derk 2014年

53

自己看看区别：

演示

从Microsoft IE

当前页面的解析完成时，将触发DOMContentLoaded事件。当所有文件从所有资源（包括广告和图片）加载完成后，就会触发load事件。DOMContentLoaded是一个很棒的事件，可用于将UI功能连接到复杂的网页。

来自Mozilla开发人员网络

当文档已经完全加载和解析时，将触发DOMContentLoaded事件，而无需等待样式表，图像和子帧完成加载（可以使用load事件来检测完全加载的页面）。

— 梅拉德·萨迪（Mehrad Sadegh）
source

是否DOMContentLoaded保证已加载所有脚本（包括延迟/异步）？关于脚本，这里什么也

— Sergey

@谢尔盖·诺佩异步资源-即<script async src = app.js />-独立于页面的其余部分加载，因此在从服务器获取资源之前DOMContentLoaded可能会被触发

— Mehrad Sadegh

1

@MehradSadegh我认为你错了！来自MDN文档：具有defer属性的脚本将阻止DOMContentLoaded事件触发，直到脚本加载并完成评估为止。您可以看一下对此问题的确认，它是这样的：stackoverflow.com/questions/42950574/…–

— radzak

1

@Jatimir我认为defer和async属性具有不同的行为。

— Mehrad Sadegh

1

无论如何，您张贴了@Jatimir Glad，因为您的贡献正好是我想要的！谢谢！

— 罗伯特·怀尔德林

29

DOMContentLoaded==window.onDomReady()

Load==window.onLoad()

在文档“就绪”之前，无法安全地操纵页面。jQuery为您检测到这种就绪状态。$（document）.ready（）内包含的代码仅在页面Document Object Model（DOM）准备好执行JavaScript代码后才能运行。一旦整个页面（图像或iframe）（不仅是DOM）准备就绪，$（window）.load（function（）{...}）中包含的代码将运行。

请参阅：http : //learn.jquery.com/using-jquery-core/document-ready/

— 安德森
source

1

问题不在于jQuery。

— user34660 '17

4

@ user34660不是，但是有助于理解。

— 安徒生

16

domContentLoaded：当DOM都准备就绪并且没有样式表阻止JavaScript执行时标记点-这意味着我们现在可以（潜在地）构造渲染树。许多JavaScript框架在开始执行自己的逻辑之前会等待此事件。因此，浏览器会捕获EventStart和EventEnd时间戳，以使我们能够跟踪执行该过程所花费的时间。
loadEvent：作为每个页面加载的最后一步，浏览器将触发“ onload”事件，该事件可以触发其他应用程序逻辑。

资源

— Skube
source

如果我有带有JS网址的脚本标签，它们会在domContentLoaded之前还是之后加载？

— 帕万

0

这是一些对我们有用的代码。我们发现MSIE容易受到影响，DomContentLoaded当没有其他资源被缓存时（根据我们的控制台日志记录最长为300ms），似乎会有一些延迟，并且在缓存它们时会触发得太快。因此，我们对MISE求助。您还想触发doStuff()函数，无论是DomContentLoaded在外部JS文件之前还是之后触发。

// detect MSIE 9,10,11, but not Edge
ua=navigator.userAgent.toLowerCase();isIE=/msie/.test(ua);

function doStuff(){
    //
}
if(isIE){
    // play it safe, very few users, exec ur JS when all resources are loaded
    window.onload=function(){doStuff();}
} else {
    // add event listener to trigger your function when DOMContentLoaded
    if(document.readyState==='loading'){
        document.addEventListener('DOMContentLoaded',doStuff);
    } else {
        // DOMContentLoaded already loaded, so better trigger your function
        doStuff();
    }
}

— K
source