完成页面加载后执行函数

我使用以下代码在页面加载后执行一些语句。

 <script type="text/javascript">
window.onload = function () {


newInvite();
document.ag.src="b.jpg";
}
</script>

但是这个代码不能正常工作。即使某些图像或元素正在加载,也会调用该函数。我想调用的函数是页面完全加载。

721117 次浏览

如果可以使用 jQuery,请看 装弹。然后可以将函数设置为在元素加载完成后运行。

例如,考虑一个带有简单图像的页面:

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

这可能对你有用:

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

试试这个 JQuery:

$(function() {
// Handler for .ready() called.
});

把你的脚本后,身体标签完成... 它的工作..。

如果希望在 html 页面中调用 js 函数,请使用 onload 事件。Onload 事件发生在用户代理完成加载一个窗口或 FRAMESET 中的所有帧时。此属性可与 BODY 和 FRAMESET 元素一起使用。

<body onload="callFunction();">
....
</body>

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 = ...

如果你已经在使用 jQuery,你可以试试这个:

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

在完成页面加载设置超时后调用函数

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

这样你就可以处理这两种情况-如果页面已经加载或没有:

document.onreadystatechange = function(){
if (document.readyState === "complete") {
myFunction();
}
else {
window.onload = function () {
myFunction();
};
};
}
window.onload = () => {
// run in onload
setTimeout(() => {
// onload finished.
// and execute some code here like stat performance.
}, 10)
}

我有点搞不懂你说的页面加载完成了,“ DOM 加载”还是“内容加载”?在 html 页面中,加载可以在两个类型事件之后触发事件。

  1. DOM load: 它确保从头到尾加载整个 DOM 树。但不确保加载引用内容。假设您通过 img标记添加了图像,因此此事件确保加载了所有的 img,但没有正确加载或未加载的图像。为了得到这个事件,你应该这样写:

    document.addEventListener('DOMContentLoaded', function() {
    // your code here
    }, false);
    

    或者使用 jQuery:

    $(document).ready(function(){
    // your code
    });
    
  2. After DOM and Content Load: Which indicate the the DOM and Content load as well. It will ensure not only img tag it will ensure also all images or other relative content loaded. To get this event you should write following way:

    window.addEventListener('load', function() {...})
    

    或者使用 jQuery:

    $(window).on('load', function() {
    console.log('All assets are loaded')
    })
    

我可以告诉您,我找到的最佳答案是在 </body>命令之后放置一个“驱动程序”脚本。它是最简单的,可能比上面的一些解决方案更通用。

计划: 在我的页面上有一张表。我将带有表格的页面写到浏览器中,然后用 JS 对其进行排序。用户可以通过单击列标题来使用它。

在表结束之后,执行 </tbody>命令,主体结束之后,我使用以下代码行调用排序 JS,按列3对表进行排序。我从网上下载了排序脚本,所以这里没有重现。至少在接下来的一年中,您可以在 static29.ILikeTheInternet.com上看到这种操作,包括 JS。点击页面底部的“这里”。这将带来另一个包含表和脚本的页面。你可以看到它放出数据,然后快速排序。我需要加快一点速度,但基本功已经有了。

</tbody></body><script type='text/javascript'>sortNum(3);</script></html>

制造者 Mikey

你也可以在下面试试。

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

这在所有情况下都有效。只有在加载整个页面时才会触发。

据我所知,你最好用

window.addEventListener('load', function() {
console.log('All assets loaded')
});

使用 DOMContentLoaded事件的第一个答案是后退一步,因为 DOM 将在所有资产加载之前加载。

其他答案推荐 setTimeout,我强烈反对,因为它完全主观的客户端的设备性能和网络连接速度。如果某人的网络速度很慢,并且/或者 CPU 速度很慢,那么加载一个页面可能需要几秒到几十秒的时间,因此您无法预测 setTimeout将需要多少时间。

至于 readystatechange,它每当 readyState变化,根据 MDN将仍然是在 load事件之前发射。

完成

状态指示加载事件即将触发。

我倾向于使用以下模式来检查文档是否完成了加载。该函数返回一个一旦文档加载完成就解析的  允诺(如果您需要支持 IE,包括 填料)。它在下面使用 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);

您可以像这样不使用 jquery 进行尝试

window.addEventListener("load", afterLoaded,false);
function afterLoaded(){
alert("after load")
}