我正在使用以下代码在页面加载后执行一些语句。
<script type="text/javascript">
window.onload = function () {
newInvite();
document.ag.src="b.jpg";
}
</script>
但是这段代码不能正常工作。即使正在加载某些图像或元素，也会调用该函数。我想要的是调用页面完全加载的函数。
问问题
655617 次
16 回答
191
这可能对你有用：
document.addEventListener('DOMContentLoaded', function() {
// your code here
}, false);
或者如果您对 jquery 感到满意，
$(document).ready(function(){
// your code
});
$(document).ready()在 DOMContentLoaded 上触发，但此事件在浏览器之间的触发不一致。这就是为什么 jQuery 很可能会实施一些繁重的变通方法来支持所有浏览器。这将使使用纯 Javascript“精确”模拟行为变得非常困难（但当然并非不可能）。
正如 Jeffrey Sweeney 和 J Torres 所建议的那样，我认为setTimeout在触发如下功能之前最好有一个功能：
setTimeout(function(){
//your code here
}, 3000);
于 2012-08-13T14:58:02.183 回答
79
JavaScript
document.addEventListener('readystatechange', event => {
// When HTML/DOM elements are ready:
if (event.target.readyState === "interactive") { //does same as: ..addEventListener("DOMContentLoaded"..
alert("hi 1");
}
// When window loaded ( external resources are loaded too- `css`,`src`, etc...)
if (event.target.readyState === "complete") {
alert("hi 2");
}
});
jQuery 相同：
$(document).ready(function() { //same as: $(function() {
alert("hi 1");
});
$(window).load(function() {
alert("hi 2");
});
注意： - 不要使用以下标记（因为它会覆盖其他同类声明）：
document.onreadystatechange = ...
于 2015-09-30T13:14:19.843 回答
45
我有点混淆你所说的页面加载完成，“DOM加载”或“内容加载”是什么意思？在 html 页面加载可以在两个类型事件之后触发事件。
DOM 加载：确保整个 DOM 树从头到尾加载。但不能确保加载参考内容。假设您通过
img标签添加了图像，因此此事件确保所有已img加载但没有正确加载的图像。要获得此事件，您应该编写以下方式：document.addEventListener('DOMContentLoaded', function() { // your code here }, false);或者使用 jQuery：
$(document).ready(function(){ // your code });After DOM and Content Load：也表示 DOM 和 Content 的加载。它将确保不仅
img标记它还将确保加载所有图像或其他相关内容。要获得此事件，您应该编写以下方式：window.addEventListener('load', function() {...})或者使用 jQuery：
$(window).on('load', function() { console.log('All assets are loaded') })
于 2017-12-26T05:51:32.703 回答
37
如果您可以使用 jQuery，请查看load。然后，您可以将函数设置为在元素完成加载后运行。
例如，考虑一个带有简单图像的页面：
<img src="book.png" alt="Book" id="book" />
事件处理程序可以绑定到图像：
$('#book').load(function() {
// Handler for .load() called.
});
如果需要加载当前窗口上的所有元素，可以使用
$(window).load(function () {
// run code
});
如果您不能使用 jQuery，那么纯 Javascript 代码基本上是相同数量（如果不是更少）的代码：
window.onload = function() {
// run code
};
于 2012-08-13T14:55:37.587 回答
11
如果您想在 html 页面中调用 js 函数，请使用 onload 事件。当用户代理完成加载 FRAMESET 中的窗口或所有框架时，会发生 onload 事件。此属性可以与 BODY 和 FRAMESET 元素一起使用。
<body onload="callFunction();">
....
</body>
于 2014-01-30T11:17:42.037 回答
8
据我所知，你最好的选择是使用
window.addEventListener('load', function() {
console.log('All assets loaded')
});
使用DOMContentLoaded事件的第一个答案是倒退了一步，因为 DOM 将在所有资产加载之前加载。
其他答案建议setTimeout我强烈反对，因为它完全取决于客户端的设备性能和网络连接速度。如果某人的网络速度较慢和/或 CPU 速度较慢，则加载页面可能需要几到几十秒，因此您无法预测需要多少时间setTimeout。
至于，只要根据MDN的更改仍将在事件发生之前readystatechange，它就会触发。readyStateload
完全的
该状态指示加载事件即将触发。
于 2019-11-07T21:57:59.783 回答
7
这样您就可以处理这两种情况 - 如果页面已加载或未加载：
document.onreadystatechange = function(){
if (document.readyState === "complete") {
myFunction();
}
else {
window.onload = function () {
myFunction();
};
};
}
于 2017-06-13T16:02:33.703 回答
6
you can try like this without using jquery
window.addEventListener("load", afterLoaded,false);
function afterLoaded(){
alert("after load")
}于 2020-09-11T10:28:50.900 回答
3
或者，您可以在下面尝试。
$(window).bind("load", function() {
// code here });
这在所有情况下都有效。这只会在加载整个页面时触发。
于 2018-12-20T03:00:41.353 回答
2
window.onload = () => {
// run in onload
setTimeout(() => {
// onload finished.
// and execute some code here like stat performance.
}, 10)
}
于 2017-12-26T04:58:43.833 回答
0
如果你已经在使用 jQuery，你可以试试这个：
$(window).bind("load", function() {
// code here
});
于 2015-12-28T17:26:19.860 回答
0
我可以告诉你，我找到的最佳答案是在</body>命令之后放置一个“驱动程序”脚本。它是最简单的，并且可能比上面的一些解决方案更通用。
计划：在我的页面上是一张桌子。我将带有表格的页面写入浏览器，然后用 JS 对其进行排序。用户可以通过单击列标题来使用它。
表格结束一个</tbody>命令，正文结束后，我使用以下行调用排序 JS 以按第 3 列对表格进行排序。我从网上获取排序脚本，因此这里不再复制。至少在接下来的一年里，你可以在static29.ILikeTheInternet.com. 点击页面底部的“这里”。这将打开另一个包含表格和脚本的页面。您可以看到它放置数据然后快速对其进行排序。我需要加快速度，但现在已经有了基础。
</tbody></body><script type='text/javascript'>sortNum(3);</script></html>
制造商米奇
于 2018-03-18T10:11:34.787 回答
0
我倾向于使用以下模式来检查文档是否完成加载。该函数返回一个 Promise （如果您需要支持 IE，请包括polyfill），一旦文档完成加载，该 Promise 就会解析。它setInterval在下面使用，因为类似的实现setTimeout可能会导致非常深的堆栈。
function getDocReadyPromise()
{
function promiseDocReady(resolve)
{
function checkDocReady()
{
if (document.readyState === "complete")
{
clearInterval(intervalDocReady);
resolve();
}
}
var intervalDocReady = setInterval(checkDocReady, 10);
}
return new Promise(promiseDocReady);
}
当然，如果你不必支持 IE：
const getDocReadyPromise = () =>
{
const promiseDocReady = (resolve) =>
{
const checkDocReady = () =>
((document.readyState === "complete") && (clearInterval(intervalDocReady) || resolve()));
let intervalDocReady = setInterval(checkDocReady, 10);
}
return new Promise(promiseDocReady);
}
使用该功能，您可以执行以下操作：
getDocReadyPromise().then(whatIveBeenWaitingToDo);
于 2020-05-07T15:52:39.163 回答
-1
完成页面加载设置超时后调用函数
setTimeout(function() {
var val = $('.GridStyle tr:nth-child(2) td:nth-child(4)').text();
for(var i, j = 0; i = ddl2.options[j]; j++) {
if(i.text == val) {
ddl2.selectedIndex = i.index;
break;
}
}
}, 1000);于 2016-09-26T06:05:42.563 回答
-3
试试这个jQuery：
$(function() {
// Handler for .ready() called.
});
于 2012-08-13T14:59:40.217 回答
-5
在body标签完成后放置你的脚本......它可以工作......
于 2013-12-02T10:05:12.160 回答