Question

我从来没有完全理解如果在加载网页时JavaScript加载的任何内容都不在函数中，那么使用window.onload是什么意思？

window.onload = function() {
  alert("hello");
};

Answer 1

From MDN:

加载事件在文档加载过程结束时触发。在至此，文档中的所有对象都在DOM中，而且都是图像，脚本，链接和子框架已完成加载。

因此，如果您需要确保所有内容都已加载，那么您需要等待触发事件。如果您准备好文档或将脚本放在正文的底部，则并非所有内容都可以完全加载。

为什么要使用它？回到过去，这是了解页面加载的唯一真实方式。但主要原因是，如果你真的需要依赖所有内容来计算元素的高度/位置，那么你需要确保它们完全存在并被渲染。如果你准备就绪，高度可能会有所不同。

简单的测试是在浏览器中加载大图像。读取主体末端的高度，准备好文档，然后上载并查看值是什么。（注意一旦图像被缓存，浏览器将具有正确的高度）

var img = document.getElementById("x");
console.log("inline:", x.height);

$(function(){ console.log("ready:", x.height); });

window.addEventListener("load", function () {
    console.log("load:", x.height);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="x" src="https://upload.wikimedia.org/wikipedia/commons/7/74/Earth_poster_large.jpg?ddddddd" />

Answer 2

如果您在单独的文件中有脚本，或者您希望首先加载其他资源的单独文件，则可能很有用。

JavaScript window.onload中有什么意义？

2 个答案: