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


306

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

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


7
那么,如何检查DOM是否准备就绪?
Mads Skjern 2014年

Answers:


441

叫做load。在DOM准备就绪之前就已经出现了问题,实际上是由于load等待图像的确切原因而创建了DOM ready 。

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

3
因此,与每一个页面组件/资源(即*包括* images)相比,只是为了澄清(如果可以的话),与DOM就绪相比,它window.onload被调用。我对吗?
BreakPhreak 2011年

19
@BreakPhreak:是:) onload等待文档中的所有资源。当然,这不包括不是文档本身的动态创建的请求,例如AJAX请求。
Matchu 2011年

3
脚本不满载
HD ..

如果在添加处理程序之前可以动态加载脚本并发生“加载”事件怎么办?
pamelus

31
更好的方法是addEventListener("load", function(){... })而不是覆盖该onload属性。
user4642212'9

30

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

有人建议使用怪异的扭曲方法来解决此问题,但实际上,如果您只是创建一个window.onunload处理程序(甚至是一个不执行任何操作的处理程序),则在所有浏览器中将禁用此缓存行为。该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();">

谁能澄清这个技巧的运作方式?对我来说太复杂了。–
Razzle,

20

为了完整起见,您可能还需要将其绑定到DOMContentLoaded,现在已广泛支持它

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

更多信息:https : //developer.mozilla.org/zh-CN/docs/Web/Events/DOMContentLoaded


7
这个答案与问题中提出的恰恰相反。
穆罕默德·本·尤斯拉特

2
确实,在加载所有DOM内容之前,在加载所有依赖项之前,都会触发DOMContentLoaded事件。既然用户引用了答案中的内容,$.ready我认为它做出了很大的贡献。顺便说一句。我也会addEventListenerload事件中使用-method ,因为它允许您进行多个回调:window.addEventListener("load", function(event){ // your code here });
murb

16

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

通过Javascript

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

通过Jquery

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

1
$(window)让我觉得这将是jquery-对吗?还是我混淆了一些JavaScript语法?(我是JS新手)。
Azendale

2
为什么不简单地$(document).ready();在jQuery可用时使用?
Andreas

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

11

试试这个代码

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

有关更多详细信息,请访问https://developer.mozilla.org/en-US/docs/DOM/document.readyState


是的,这很有帮助。非常感谢〜
布拉沃杨

2
"interactive"未完全加载。 "complete"已满载
Ryan Walker

最后!感谢百万,雅各布。此处列出的所有众多方法均已失败(最多只能更新一个单选按钮,并且可以完成结果计算,但该按钮不会显示为被按下),您的方法可以解决问题。
SECR

8

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

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


8

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

<body onload="somecode();" >

如果您使用的是jQuery框架的文档就绪功能,则代码将在DOM加载后以及页面内容加载之前立即加载:

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

7

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


啊,辉煌。香港专业教育学院做到这一点。页面上的最后一个图像是:<img src =“ imdbupdate.php?update = ajax” style =“ display:hidden” onload =“ window.location ='movies.php?do = admincp'” />但是不readirect我
奔Shelock

...什么?您要在图像加载后重定向吗?
Matchu 2009年

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

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

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


2

在具有现代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



1

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;
};

-1

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

$(document).ajaxComplete(function(){
       alert("Everything is ready now!");
});
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.