【发布时间】：2010-11-05 05:25:38
【问题描述】：
当页面完全加载时，我需要执行一些 JavaScript 代码。这包括图像之类的东西。
我知道你可以检查 DOM 是否准备好，但我不知道这是否与页面完全加载时相同。
【问题讨论】：
-
那么，如何检查 DOM 是否准备就绪？
-
如果java脚本正在加载异步stackoverflow.com/questions/8618464/…
标签： javascript
【发布时间】：2010-11-05 05:25:38
【问题描述】：
这就是load。它是在 DOM 就绪之前出现的，而 DOM 就绪实际上是为 load 等待图像的确切原因而创建的。
window.addEventListener('load', function () {
alert("It's loaded!")
})
【讨论】：
-
所以，为了澄清（如果我可以的话），与 DOM 就绪相比，
window.onload在 每个 页面组件/资源（即 *包括 *图像）时被调用。我说的对吗？ -
@BreakPhreak: yes :)
onload等待文档中的所有资源。当然，这不包括动态创建的不属于文档本身的请求，例如 AJAX 请求。 -
脚本未完全加载
-
如果我的脚本可能是动态加载的，并且在我添加处理程序之前发生了“加载”事件怎么办？
-
更好的方法是
addEventListener("load", function(){…})而不是覆盖onload属性。
通常您可以使用window.onload，但您可能会注意到，当您使用后退/前进历史按钮时，最近的浏览器不会触发window.onload。
有些人 suggest 奇怪的扭曲来解决这个问题，但实际上如果你只是制作一个 window.onunload 处理程序（即使是一个不做任何事情的处理程序），这种缓存行为将在 all 浏览器。 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();">
【讨论】：
-
谁能解释一下这个技巧是如何工作的？对我来说太复杂了，呵呵..
为了完整起见，您可能还希望将其绑定到现在已广泛支持的 DOMContentLoaded
document.addEventListener("DOMContentLoaded", function(event){
// your code here
});
更多信息：https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded
【讨论】：
-
这个答案与问题中提出的完全相反。
-
确实，DOMContentLoaded 事件是在所有 DOM 内容都已加载时触发的，在它加载所有依赖项之前。由于答案线程中的用户引用了
$.ready，我认为它做出了很好的贡献。顺便提一句。我也会将addEventListener-方法用于load事件，因为它允许您有多个回调：window.addEventListener("load", function(event){ // your code here });
试试这个，它只在整个页面加载后运行
通过 JavaScript
window.onload = function(){
// code goes here
};
通过 Jquery
$(window).bind("load", function() {
// code goes here
});
【讨论】：
-
$(window)让我觉得这应该是 jquery——对吧？还是我让一些 javascript 语法感到困惑？ （我是 JS 新手）。 -
当 jQuery 可用时，为什么不简单地使用
$(document).ready();？ -
你的是文档（或多或少只是解析的 HTML），另一个（“加载”）是 一切，包括图像和样式。看你需要什么。
试试这个代码
document.onreadystatechange = function () {
if (document.readyState == "complete") {
initApplication();
}
}
访问https://developer.mozilla.org/en-US/docs/DOM/document.readyState了解更多详情
【讨论】：
-
是的，这很有帮助。非常感谢~
-
"interactive"未完全加载。"complete"已满载 -
终于！谢谢一百万，雅各布。此处列出的所有众多方法都失败了（充其量，单选按钮将被更新，并且可以进行结果计算，但按钮不会被按下），您的方法可以解决问题。
window.onload 事件将在加载所有内容（包括图像等）时触发。
如果您希望您的 js 代码尽早执行，您可能需要检查 DOM 就绪状态，但您仍然需要访问 DOM 元素。
【讨论】：
使用onLoad()事件的Javascript，会等待页面加载完成后再执行。
<body onload="somecode();" >
如果您使用 jQuery 框架的文档就绪功能，则代码将在 DOM 加载后且在页面内容加载之前加载：
$(document).ready(function() {
// jQuery code goes here
});
【讨论】：
您可能想要使用window.onload，因为文档表明在 DOM 准备好并且页面中的所有其他资产（图像等）都加载之前不会触发它。
【讨论】：
-
啊，太棒了。好吧，我做到了。页面上的最后一张图片是这样的： 但是它不会重定向我
-
...什么？您想在图像加载后重定向吗？
-
我不知道你为什么想要那个，但它不重定向的原因可能是它的显示：隐藏，因此浏览器不会费心加载它，因为它会不显示。
-
也许它只是一个隐藏的图像，在服务器上做了一些重要的事情，比如跟踪命中或在数据库中做某事？
-
我可以理解，但是让它重定向之后对我来说没有意义。如果您不希望用户花时间在页面上，为什么还要拥有该页面？如果目标是在加载时重定向，为什么不直接使用 window.onload 事件，因为它总体上是一个更简洁的实现？
在带有现代 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。
【讨论】：
这是一种使用PrototypeJS 的方法：
Event.observe(window, 'load', function(event) {
// Do stuff
});
【讨论】：
GlobalEventHandlers mixin 的 onload 属性是一个事件 Window、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;
};
【讨论】：
如果您需要使用多个onload，请改用$(window).load (jQuery)：
$(window).load(function() {
//code
});
【讨论】：
2019 年更新：这是对我有用的答案。因为我需要多个 ajax 请求来触发并首先返回数据来计算列表项。
$(document).ajaxComplete(function(){
alert("Everything is ready now!");
});
【讨论】：
-
这与问题没有任何关系。此代码与 Ajax 请求有关。