Question

我需要在页面完全加载时执行一些JavaScript代码。这包括像图像。

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

Answer 1

这叫做onload。在DOM准备就绪之前，它已经出现了，并且实际创建了DOM，因为onload等待图像的确切原因。

window.onload = function () { alert("It's loaded!") }

Answer 2

通常您可以使用window.onload，但您可能会注意到，当您使用后退/前进历史记录按钮时，最近的浏览器不会触发window.onload。

有些人suggest奇怪的扭曲来解决这个问题，但实际上如果你只做一个window.onunload处理程序（即使是一个不做任何事情的处理程序），这个缓存行为将在< em>所有浏览器。 MDC很好地记录了这个“功能”，但由于某种原因，仍然有人使用setInterval和其他奇怪的黑客。

某些版本的Opera有一个可以通过在页面中的某处添加以下内容来解决的错误：

<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();">

Answer 3

试一试仅在整页加载后运行

通过Javascript

window.onload = function(){
    // code goes here
};

通过Jquery

$(window).bind("load", function() {
    // code goes here
});

Answer 4

为了完整起见，您可能还想将它绑定到DOMContentLoaded，现在广泛支持它

document.addEventListener("DOMContentLoaded", function(event){
  // your code here
});

Answer 5

window.onload事件将在加载所有内容时触发，包括图像等。

如果您希望尽早执行js代码，则需要检查DOM就绪状态，但仍需要访问DOM元素。

Answer 6

试试此代码

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

Answer 7

使用onLoad()事件的Javascript将在执行前等待页面加载。

<body onload="somecode();" >

如果你正在使用jQuery框架的文档就绪函数，代码将在加载DOM之后和加载页面内容之前加载：

$(document).ready(function() {
    // jQuery code goes here
});

Answer 8

您可能希望使用window.onload，因为文档表明在DOM准备就绪并且页面中的所有其他资源（图像等）都已加载之前，它才会被触发。

Answer 9

这是使用PrototypeJS：

的方法

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

Answer 10

如果您需要使用许多`onload`使用`$(window).load`代替（jQuery）：

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

Answer 11

GlobalEventHandlers mixin的 onload 属性是一个事件 Window，XMLHttpRequest，element的load事件的处理程序，等等，在资源加载时触发。

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

你可以做点什么：

var spinner = true;

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

Answer 12

在使用现代javascript（> = 2015）的现代浏览器中，您可以将type="module"添加到脚本中，并且该脚本中的所有内容都将在加载孔页面后执行。例如：

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

较旧的浏览器也会理解nomodule属性。像这样的东西：

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

有关更多信息，您可以访问javascript.info

Answer 13

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

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

如果您需要使用许多onload使用$(window).load代替（jQuery）：