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