📅 最后修改于: 2023-12-03 15:13:40.507000 🧑 作者: Mango
当页面加载时，我们可能需要在页面完全加载后运行一些JavaScript代码。常用的有两种方式：body.onload()和document.ready()函数。
body.onload()函数是在整个页面加载完成后执行。它会在所有页面元素（如图片和视频）都加载完成后才会执行相关的JavaScript代码。
<body onload="functionName()">
...
</body>
这里，functionName()是你需要执行的JavaScript函数名称。但是，使用body.onload()有一个显著的缺点，它只在页面完全加载后才执行JavaScript代码。这意味着如果页面中包含大量图片或其他外部资源，用户可能需要等待一段时间才能看到完整的页面。
与body.onload()不同，document.ready()函数是在DOM（文档对象模型）完全加载但页面相关的资源（如图片和视频）仍在加载的时候就会执行。这意味着你可以更早地运行JavaScript代码来操作页面元素，而不必等待页面全部加载完毕。
$(document).ready(function() {
// your code here
});
使用document.ready()通常需要jQuery，因为它是该函数的一个依赖项。$(document).ready(function() {})是jQuery简写的形式。具体来说，它是$(document).on('ready', function() {})的简写形式。它在DOM完全加载时绑定了一个事件处理程序。到达这一点时，可以执行JavaScript代码。
因此，document.ready()相对于body.onload()具有更好的性能。但是，它的一个缺点是如果页面中的元素比较多，你可能无法立即访问它们。这是因为它们仍在加载。如果你尝试操作它们，你可能会得到一个错误或找不到元素。
body.onload()在所有页面资源都完成加载之后才执行JavaScript代码。document.ready()在DOM完成加载之后立即执行JavaScript代码。由于其更快的执行时间和更早的访问DOM元素，它是一个更好的选择。