在前端开发中，我们经常需要在文档加载完成后执行 JavaScript 代码。这时候就有三种常用的事件可以选择：window.onload、body.onload、和 document.ready（也叫做 DOMContentLoaded）。
window.onload
window.onload 事件会在整个页面及其所有资源（如图片、CSS 文件等）都加载完成后才触发。这意味着如果页面中包含大量资源，那么 window.onload 事件可能会被拖延很长时间。
window.onload = function() {
// 页面完全加载后执行此处的代码
};body.onload
body.onload 事件会在页面主体部分的 HTML 文档加载完成后立即触发，而不是等待所有资源都加载完成。它比 window.onload 更快一些，但仍然需要等待整个 HTML 文档加载完成。
<body onload="myFunction()">
function myFunction() {
// 页面主体部分加载完成后执行此处的代码
}document.ready
document.ready 事件仅在 HTML 文档加载完成并解析完毕后即可触发，而不必等待所有资源都加载完成。这使得它比前两者更快，并且可以在页面上使用 jQuery 等库来方便地操作 DOM 元素。
$(document).ready(function() {
// HTML 文档解析完毕后执行此处的代码
});或者使用简写：
$(function() {
// HTML 文档解析完毕后执行此处的代码
});值得注意的是，document.ready 事件只有在使用 jQuery 等库时才可用。如果你不使用这些库，你可以使用原生 JavaScript 实现。
原生 JavaScript 实现 document.ready 事件：
document.addEventListener("DOMContentLoaded", function() {
// HTML 文档解析完毕后执行此处的代码
});指导意义
针对这三种常用的页面加载事件，我们应该根据具体情况选择合适的事件来确保代码能够按预期执行。以及需要了解 document.ready 的本质是通过监听 DOMContentLoaded 事件实现，比 window.onload 更快，而且可以使用 jQuery 等库操作 DOM 元素。
如果你使用 jQuery 等库，建议使用 $(document).ready() 或 $(function(){})，因为它们更方便易读，并且兼容性良好。如果你不使用这些库，则应该使用原生 JavaScript 实现 document.ready 事件。
总之，在前端开发中，了解页面加载事件的差异和使用场景是非常重要的。正确地使用它们将有助于提高用户体验和减少不必要的等待时间。
参考示例代码：
-- -------------------- ---- -------
--------- -----
------
------
-----------------------
-------
------
---------------
------- -----------------------------------------------------------
--------
-- -- ------ - ------------------- --
---------------------------- -
----------------- -----------------
---
---------
--------
-- ---- ---------- -- -------------- --
--------------------------------------------- ---------- -
----------------- -----------------
---
---------
-------
-------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/12260
