如何使JavaScript页面加载后执行?

我正在执行一个外部脚本，使用<脚本>内<头>。

现在，由于脚本在页面加载之前执行，我不能访问<body>等。我想在文档被“加载”(HTML完全下载并在ram中)后执行一些JavaScript。是否有任何事件，我可以挂钩到当我的脚本执行，这将在页面加载触发?

当前回答

我发现有时在更复杂的页面上，并不是所有的元素都在时间窗口加载。Onload被触发。如果是这种情况，在函数延迟片刻之前添加setTimeout。它不是优雅的，但它是一个简单的hack渲染良好。

window.onload = function(){ doSomethingCool(); };

变得……

window.onload = function(){ setTimeout( function(){ doSomethingCool(); }, 1000); };

2013-07-20 21:13:54

其他回答

<body onload="myFunction()">

这段代码运行良好。

但窗口。Onload方法有各种依赖关系。所以它可能不会一直有效。

2013-04-29 11:32:29

在合适的时机触发脚本

A quick overview on how to load / run the script at the moment in which they intend to be loaded / executed.

使用“推迟”

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

使用defer将触发domInteractive (document. doc .)readyState = "interactive")，就在"DOMContentLoaded"事件触发之前。如果你需要在所有资源(图像，脚本)加载后执行脚本，请使用“load”事件或目标文档之一。请求状态。继续往下阅读，了解有关这些事件/状态的更多信息，以及与脚本获取和执行计时相对应的async和defer属性。

此布尔属性被设置为向浏览器指示脚本意味着在解析文档之后执行，但在解析之前发射DOMContentLoaded。内带有defer属性的脚本将阻止DOMContentLoaded 事件，直到脚本加载并完成求值。

资源:https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script属性

*请参阅底部的图片以了解羽毛的解释。

事件监听器-请记住页面的加载有多个事件:

“DOMContentLoaded”

当初始HTML文档完全加载和解析完毕时，无需等待样式表、图像和子帧完成加载，就会触发此事件。在这个阶段，您可以基于用户设备或带宽速度以编程方式优化图像和CSS的加载。 DOM加载后执行(在图像和CSS之前):

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

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

“负载”

A very different event, **load**, should only be used to detect a *fully-loaded page*. It is an incredibly popular mistake to use load where DOMContentLoaded would be much more appropriate, so be cautious.

在所有内容加载并解析后执行:

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

事件监听器与readyStates -替代解决方案(readystatechange):

You can also track document.readystatechange states to trigger script execution.

// 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

在哪里放置你的脚本(有&没有异步/延迟)?

This is also very important to know where to place your script and how it positions in HTML as well as parameters like defer and async will affects script fetching, execution and HTML blocking.

* On the image below the yellow label “Ready” indicates the moment of ending loading HTML DOM. Then it fires: document.readyState = "interactive" >>> defered scripts >>> DOMContentLoaded event (it's sequential);

如果你的脚本使用async或defer，请阅读:https://flaviocopes.com/javascript-async-defer/

如果以上几点都还为时过早……

如果你需要你的脚本在其他脚本运行之后运行，包括那些计划在最后运行的脚本(例如，那些计划在“load”事件中运行的脚本)，该怎么办?参见“运行JavaScript”窗口。Onload脚本是否已完成?

如果您需要确保您的脚本在其他脚本之后运行，而不管它何时运行，该怎么办?以上问题的答案也涵盖了这一点。

2016-03-19 00:50:30

这些解决方案是有效的:

正如注释中提到的，使用defer:

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

<body onload="script();">

document.onload = function ...

甚至

window.onload = function ...

请注意，最后一个选项是更好的方法，因为它不引人注目，而且被认为更标准。

2009-04-30 16:41:16

window.onload = function(){ doSomethingCool(); };

变得……

window.onload = function(){ setTimeout( function(){ doSomethingCool(); }, 1000); };

2013-07-20 21:13:54

使用此代码与jQuery库，这将工作得很好。

$(window).bind("load", function() { 

  // your javascript event

});

2017-12-21 13:32:26

如何使JavaScript页面加载后执行?

推荐文章

最新文章

标签