页面 DOM 和浏览器加载

Created: November-22, 2018

这是一个解释负载事件变化的示例。

onload 事件

<body onload="someFunction()">
<img src="image1" />
<img src="image2" />
</body>

<script>
    function someFunction() {
    console.log("Hi! I am loaded");
}
</script>

在这种情况下，一旦页面的所有内容（包括图像和样式表（如果有）） 被完全加载，就会记录消息。

DOMContentLoaded 事件

document.addEventListener("DOMContentLoaded", function(event) {
    console.log("Hello! I am loaded");
});

在上面的代码中，仅在加载 DOM /文档之后才记录消息（ 即：一旦构造了 DOM ）。

自我调用匿名函数

(function(){
    console.log("Hi I am an anonymous function! I am loaded");
})();

这里，一旦浏览器解释匿名函数，就会记录消息。这意味着，即使在加载 DOM 之前，此函数也可以执行。