如何让JavaScript在页面加载后执行？在适当的时候触发脚本

javascript dom html dom-events pageload

2022-08-29 22:12:35

我正在执行一个外部脚本，使用内部.<script><head>

现在，由于脚本在页面加载之前执行，因此我无法访问，其中包括。我想在文档“加载”（HTML完全下载并在RAM中）之后执行一些JavaScript。当我的脚本执行时，是否有任何事件可以挂钩到，这些事件将在页面加载时触发？<body>

答案 1

这些解决方案将起作用：

如注释中所述，使用延迟：

<script src="deferMe.js" defer></script>

或

<body onload="script();">

或

document.onload = function ...

甚至

window.onload = function ...

请注意，最后一个选项是更好的方法，因为它不显眼，并且被认为更标准。

答案 2

在适当的时候触发脚本

关于如何在打算加载/执行脚本时加载/运行脚本的快速概述。

使用“延迟”

<script src="script.js" defer></script>

使用 defer 将在 domInteractive （document.readyState = “interactive”）之后和 “DOMContentLoaded” 事件触发之前触发。如果需要在加载所有资源（图像、脚本）后执行脚本，请使用“load”事件或目标之一 document.readyState 状态。请继续阅读，以获取有关这些事件/状态的更多信息，以及与脚本获取和执行计时相对应的异步和延迟属性。

此布尔属性设置为向浏览器指示脚本应在文档解析后但在触发 DOMContentLoaded 之前执行。

具有 defer 属性的脚本将阻止 DOMContentLoaded 事件触发，直到脚本加载并完成计算。

资源：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#attributes

*请参阅底部的图像以获取羽毛说明。

事件侦听器 - 请记住，加载页面具有多个事件：

“DOMContentLoaded”

当初始 HTML 文档已完全加载和分析，而无需等待样式表、图像和子帧完成加载时，将触发此事件。在此阶段，您可以根据用户设备或带宽速度以编程方式优化图像和 CSS 的加载。

在加载 DOM 之后执行（在图像和 CSS 之前）：

document.addEventListener("DOMContentLoaded", function(){
    //....
});

注意：同步 JavaScript 暂停对 DOM 的解析。如果您希望在用户请求页面后尽可能快地解析DOM，则可以将JavaScript转换为异步并优化样式表的加载

“加载”

一个非常不同的事件**load**，应该仅用于检测*完全加载的页面*。在 DOMContentLoaded 更合适的位置使用 load 是一个非常流行的错误，所以要小心。

在加载和解析所有内容后执行：

document.addEventListener("load", function(){
    // ....
});

MDN资源：https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded https://developer.mozilla.org/en-US/docs/Web/Events/load

所有事件的MDN列表：
https://developer.mozilla.org/en-US/docs/Web/Events

具有 radyStates 的事件侦听器 - 替代解决方案（readystatechange）：

您还可以跟踪 document.readystatechange 状态以触发脚本执行。

// Place in header (do not use async or defer)
document.addEventListener('readystatechange', event => {
  switch (document.readyState) {
    case "loading":
      console.log("document.readyState: ", document.readyState,
       `- The document is still loading.`
       );
      break;
    case "interactive":
      console.log("document.readyState: ", document.readyState, 
        `- The document has finished loading DOM. `,
        `- "DOMContentLoaded" event`
        );
      break;
    case "complete":
      console.log("document.readyState: ", document.readyState, 
        `- The page DOM with Sub-resources are now fully loaded. `,
        `- "load" event`
        );
      break;
  }
});

MDN资源：https://developer.mozilla.org/en-US/docs/Web/API/Document/readyState

在哪里放置脚本（带或不带异步/延迟）？

了解脚本的位置以及它在HTML中的位置以及诸如defer和异步之类的参数也会影响脚本提取，执行和HTML阻止，这一点也非常重要。

* 在图片下方的黄色标签“就绪”表示结束加载 HTML DOM 的时刻。然后它触发：document.readyState = “interactive” >>>延迟脚本>>> DOMContentLoaded 事件（它是顺序的）;

如果您的脚本使用异步或延迟，请阅读以下内容：https://flaviocopes.com/javascript-async-defer/