页面完全加载后如何执行功能？

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

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

那么，如何检查DOM是否准备就绪？

如果Java脚本正在加载异步，则会看到此工作正常stackoverflow.com/questions/8618464/…

#1 楼

那叫load。在DOM准备就绪之前就出现了waaaaay，实际上是由于load等待图像的确切原因而创建了DOM ready。

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

评论
因此，为了澄清（如果可以的话），与DOM就绪相比，每个页面组件/资源（即*包括* images）时都调用window.onload。我对吗？



 – BreakPhreak

 2011年6月22日上午9:21 
@BreakPhreak：是:) onload等待文档中的所有资源。当然，这不包括不是文档本身一部分的动态创建的请求，例如AJAX请求。



 –马图

 2011年6月22日18:49 
脚本未完全加载



 – HD ..

 15年10月23日在10:28 
如果在添加处理程序之前可以动态加载脚本并发生“加载”事件怎么办？



 – pamelus

 16年8月30日在10:40 
更好的方法是addEventListener（“ load”，function（）{…}）而不是覆盖onload属性。



 –塞巴斯蒂安·西蒙（Sebastian Simon）

 17年9月5日13:21

#2 楼

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

有人建议使用怪异的扭曲方法来解决此问题，但实际上，如果您仅创建一个window.onunload处理程序（甚至是一个不执行任何操作的处理程序），则该缓存行为将在所有浏览器中禁用。 MDC很好地记录了此“功能”，但由于某些原因，仍然有人使用setInterval和其他怪异的hacks。

某些版本的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();">

谁能澄清这个技巧的运作方式？对我来说太复杂了

–疯狂
20-4-11上午11:46

#3 楼

为了完整起见，您可能还希望将其绑定到DOMContentLoaded，现在已广泛支持该内容。

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

更多信息：https://developer.mozilla.org/en -US / docs / Web / Events / DOMContentLoaded

这个答案与问题中提出的恰恰相反。

–穆罕默德·本·尤斯拉特
17年12月25日在19:25

确实，在加载所有DOM内容之前，在加载所有依赖项之前，都会触发DOMContentLoaded事件。由于回答线程中的用户引用了$ .ready，因此我认为它做出了很大的贡献。顺便说一句。不过，我还将addEventListener方法用于加载事件，因为它允许您进行多个回调：window.addEventListener（“ load”，function（event）{//您的代码在这里}）;

– Murb
18年1月2日在18:08

#4 楼

尝试此操作，仅在整个页面加载后运行

使用Javascript

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

通过Jquery

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

$（window）让我觉得这将是jquery-对吗？还是我弄糊涂了一些JavaScript语法？（我是JS新手）。

–阿岑代尔
15年11月11日在20:51

为什么不简单地使用$（document）.ready（）; jQuery何时可用？

–安德烈亚斯（Andreas）
16年3月3日在15:22

您的是文档（或多或少只是解析的HTML），其他的（“加载”）则是包括图像和样式在内的所有内容。取决于您的需求。

–装饰品
16-10-25在20:19

#5 楼

尝试使用此代码

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

访问https://developer.mozilla.org/zh-CN/docs/DOM/document.readyState了解更多详细信息

是的，这很有帮助。非常感谢〜

–杨Br仪
19 Mar 5 '19 at 15:55

“交互式”未完全加载。 “完成”已满载

–瑞安·沃克（Ryan Walker）
19年11月7日在21:22

最后！感谢百万，雅各布。这里列出的所有方法都失败了（最多只能更新一个单选按钮，并且可以完成结果计算，但是该按钮不会显示为被按下），您的方法就可以解决问题。

–secr
20年6月13日在20:11

#6 楼

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

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

#7 楼

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

啊，辉煌。香港专业教育学院做到这一点。页面上的最后一个图像是：

但是不会重定向我

–本·谢洛克
09年6月23日在16:02

...什么？您要在图像加载后重定向吗？

–马图
09年6月23日16:06

我不确定您为什么要这么做，但是它不重定向的原因可能是display：hidden，因此浏览器不会费心加载它，因为它不会显示。

–马图
09年6月23日在16:07

也许这只是一个隐藏的图像，它在服务器上做一些重要的事情，例如跟踪命中或在数据库中做某事？

– Marc Novakowski
09年6月23日在16:53

我可以理解，但是对它进行重定向对我来说没有意义。如果您不希望用户花时间在页面上，那么为什么还要页面呢？如果目标是在加载时重定向，那么为什么不使用window.onload事件，因为它总体上来说更干净？

–马图
09年6月23日在18:04

#8 楼

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

<body onload="somecode();" >

如果您使用的是jQuery框架的文档准备功能，则代码将以DOM加载之后以及页面内容加载之前：

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

#9 楼

这是使用PrototypeJS的一种方法：

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

#10 楼

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

#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请求有关。

–杰克（Jackal）
20年9月7日在14:43

编程黑洞网