当页面完全加载时，如何执行函数?

当页面完全加载时，我需要执行一些JavaScript代码。这包括像图像这样的东西。

我知道您可以检查DOM是否准备好了，但我不知道这是否与页面完全加载时相同。

当前回答

完成@Matchu和@abSiddique的回答。

这样的:

window.addEventListener('load', (event) => {
  console.log('page is fully loaded');
});

与此相同，但使用onload事件处理程序属性:

window.onload = (event) => {
  console.log('page is fully loaded');
};

来源:

https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event

这里有一个活生生的例子:

https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event#live_example

其他回答

这里有一个用PrototypeJS来做的方法:

Event.observe(window, 'load', function(event) {
    // Do stuff
});

在使用现代javascript(>= 2015)的现代浏览器中，您可以在脚本标记中添加type="module"，脚本中的所有内容将在整个页面加载后执行。例句:

<script type="module">
  alert("runs after") // Whole page loads before this line execute
</script>
<script>
  alert("runs before")
</script>

旧的浏览器也能理解nomodule属性。就像这样:

<script nomodule>
  alert("tuns after")
</script>

更多信息请访问javascript.info。

完成@Matchu和@abSiddique的回答。

这样的:

window.addEventListener('load', (event) => {
  console.log('page is fully loaded');
});

与此相同，但使用onload事件处理程序属性:

window.onload = (event) => {
  console.log('page is fully loaded');
};

来源:

https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event

这里有一个活生生的例子:

https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event#live_example

试试这段代码

document.onreadystatechange = function () {
  if (document.readyState == "complete") {
    initApplication();
  }
}

详情请访问https://developer.mozilla.org/en-US/docs/DOM/document.readyState

如果你需要使用很多onload使用$(window)。加载代替(jQuery)

$(window).load(function() {
    //code
});

推荐文章