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

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

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

当前回答

如果你需要使用很多onload使用$(window)。加载代替(jQuery)

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

其他回答

通常你可以用window。Onload，但你可能会注意到最近的浏览器不发射窗口。Onload时，您使用后退/前进历史按钮。

有些人建议用一些奇怪的方法来解决这个问题，但实际上如果你只是做一个窗口。Onunload处理程序(即使是一个不做任何事情)，这种缓存行为将在所有浏览器中被禁用。MDN很好地记录了这个“特性”，但出于某种原因，仍然有人使用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();">

完成@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

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

<body onload="somecode();" >

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

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

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

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

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

这里有一个用PrototypeJS来做的方法:

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

推荐文章