在完全加载页面后执行函数

10 浏览
0 Comments

在完全加载页面后执行函数

这个问题已经在此处有了答案:

如何在页面加载后执行JavaScript？

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

但是这个代码不能正常工作。即使一些图片或元素正在加载，函数也会被调用。我想要的是在页面完全加载后调用函数。

admin 更改状态以发布 2023年5月23日
0

2 答案

0 Comments

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

0
0 Comments

这可能对你有用:

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

0