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

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

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

当前回答

这叫做负荷。它在DOM ready出现之前就出现了，而DOM ready实际上是为了加载等待图像而创建的。

window.addEventListener('load', function () {
  alert("It's loaded!")
})

其他回答

2019年更新:这是对我有用的答案。因为我需要多个ajax请求来触发并首先返回数据来计数列表项。

$(document).ajaxComplete(function(){
       alert("Everything is ready now!");
});

这叫做负荷。它在DOM ready出现之前就出现了，而DOM ready实际上是为了加载等待图像而创建的。

window.addEventListener('load', function () {
  alert("It's loaded!")
})

GlobalEventHandlers mixin的onload属性是一个事件窗口加载事件的处理程序，XMLHttpRequest，元素，等，它在资源加载时触发。

所以基本上javascript已经有onload方法在窗口上执行，哪个页面完全加载，包括图像…

你可以做一些事情:

var spinner = true;

window.onload = function() {
  //whatever you like to do now, for example hide the spinner in this case
  spinner = false;
};

通常你可以用window。Onload，但你可能会注意到最近的浏览器不发射窗口。Onload时，您使用后退/前进历史按钮。

有些人建议用一些奇怪的方法来解决这个问题，但实际上如果你只是做一个窗口。Onunload处理程序(即使是一个不做任何事情)，这种缓存行为将在所有浏览器中被禁用。MDN很好地记录了这个“特性”，但出于某种原因，仍然有人使用setInterval和其他奇怪的hack。

某些版本的Opera有一个bug，可以通过在页面中添加以下内容来解决:

<script>history.navigationMode = 'compatible';</script>

如果你只是想获得一个javascript函数，每次视图调用一次(不一定在DOM加载完成后)，你可以这样做:

<img src="javascript:location.href='javascript:yourFunction();';">

例如，我使用这个技巧在加载屏幕上将一个非常大的文件预加载到缓存中:

<img src="bigfile"
onload="this.location.href='javascript:location.href=\'javascript:doredir();\';';doredir();">

在使用现代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。

推荐文章