当页面完全加载时，如何执行函数?

小开

最佳答案

它被称为load。它在DOM ready出现之前就出现了，而DOM ready实际上是为了load等待图像而创建的。

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

小开

窗外。Onload事件将在加载所有内容时触发，包括图像等。

如果你想要你的js代码尽可能早地执行，你会想要检查DOM就绪状态，但你仍然需要访问DOM元素。

小开

你可能想要使用window，因为文档表明它不会被触发，直到DOM准备好并且页面中的所有其他资产(图像等)都被加载。

小开

下面是一种使用PrototypeJS的方法:

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

小开

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

有些人建议奇怪的扭曲来解决这个问题，但实际上如果你只是做了一个window.onunload处理程序(即使是一个什么都不做的处理程序)，这种缓存行为将在所有浏览器中被禁用。争取民主变革运动很好地记录了这个“功能”，但出于某种原因，仍然有人使用setInterval和其他奇怪的hack。

某些版本的Opera有一个bug，可以通过在页面中添加以下内容来解决:

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

小开

试试这段代码

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

小开

Javascript使用onLoad()事件，将等待页面加载后再执行。

<body onload="somecode();" >

如果你正在使用jQuery框架的文档准备函数，代码将在DOM加载时加载，在页面内容加载之前加载:

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

小开

尝试这只运行后，整个页面已加载

通过Javascript

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

通过Jquery

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

小开

如果你需要使用很多`onload`，使用`$(window).load`代替(jQuery):

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

小开

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

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

小开

GlobalEventHandlers mixin的onload属性是一个事件处理窗口的加载事件，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;
};

小开

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

小开

这就是对我有用的答案。因为我需要多个ajax请求来触发并首先返回数据来计数列表项。

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

小开

完成@Matchu和@abSiddique的回答。

这样的:

window.addEventListener('load', (event) => {
console.log('page is fully loaded');
});

与此相同，但使用onload事件处理程序属性:

window.onload = (event) => {
console.log('page is fully loaded');
};

来源:

https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event

这里有一个活生生的例子:

https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event#live_example

当页面完全加载时，如何执行函数?

如果你需要使用很多onload，使用$(window).load代替(jQuery):

如果你需要使用很多`onload`，使用`$(window).load`代替(jQuery):