javascript 中的 Window.onload 与 onDocumentReady
javascriptweb developmentfront end technology
在 JavaScript 中，window.onload 和 document.ready() 是加载页面时使用的方法。
Window.onload
window.onload 方法在整个网页加载完成后执行。这包括与 DOM 相关的所有元素，如 head 标签、tittle 标签以及所有其他标签，包括样式表、图像和视频。onload 方法通过向其传递一个函数来使用。调用的函数将在对象加载后执行。
语法
这是 onload 方法的语法 −
Window.onload = function()
Window.onload = (event) =>; {} //箭头函数
示例 1
此示例演示了 JavaScript 中 window.onload 的工作原理 −
<!DOCTYPE html> <html lang="en"> <head> <title>window.onload()</title> <script src="https://code.jquery.com/jquery-3.5.0.js"></script> <script> window.onload = (event) => { console.log("The first call will not be loaded if there are two window.onload calls"); }; window.onload = (event) => { console.log("The second call is loaded while using window.onload"); }; </script> </head> <body id="body"> <h1>window.onload()</h1> </body> </html>
输出
这是执行上述代码时控制台中显示的输出 −
使用 window.onload 时加载了第二个调用
在上面的例子中，有两个 window.onload 函数调用。但它只显示第二个调用的内容。因为当使用 window.onload 时，内容将在页面直接加载时加载。
Windows.ready
因此，如果有可能有更多 window.onload 函数调用，那么将执行最后一个。当 DOM(文档对象模型)加载后，就会发生 ready 事件。
所有其他 jQuery 事件和函数的最佳位置是此事件，因为它发生在文档准备就绪之后。如下面解释的示例所示。当 ready() 方法指定了 ready 事件发生时会发生什么，如下所示。
语法
Windows.ready 函数语法如下 −
$(document).ready(function () {
//statements.
});
< body onload= " " > 和 ready() 方法不应一起使用。
示例
此示例演示了 JavaScript 中的 onDocumentReady 的工作原理 −
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script> $(document).ready(function () { $("button").click(function () { $("p").slideToggle(); }); }); </script> </head> <body> <p>onDocumentready is used, then after the document is loaded then the functionality will be shown which reduces the errors </p> <button>Click to hide</button> </body> </html>
