jquery 如何检查页面是否已完全加载(脚本和所有)?

cigdeys3  于 2023-01-30  发布在  jQuery
关注(0)|答案(5)|浏览(214)

我知道,这里有很多关于这个问题的答案。但是我的情况有点不同,我还没有找到答案。
我试图在页面完全加载后显示消息。使用$(document).ready, document.readyStateChange,我不在乎。
问题是文档正好在需要执行的脚本中间准备好,我尝试过使用window.onload来完成(它与jQuery等效),但是它在一些图像/元素出现之前向我显示消息。有没有办法等待它被执行,然后才显示消息?(请记住,我可能需要在同一页中做几次)。
先谢了!

b4qexyjb

b4qexyjb1#

听起来你需要让你的代码作为一个回调来运行,无论脚本必须首先执行,而不是绑定到document.ready事件。如果你可以张贴一些代码,我可能可以帮助更多。

20jt8wwn

20jt8wwn2#

bianca,为什么不尝试从需要运行的脚本加载消息呢?在脚本末尾触发消息,这样您就知道需要运行的脚本已经完成。

b4qexyjb

b4qexyjb3#

Javascript按照编写的顺序执行。我猜你当前的代码是在HTML加载后运行的(即window.onload),如果是这样的话,就让你的消息成为Javascript中调用的最后一个东西。
唯一的例外是,如果您异步调用XMLHttpRequest,那么您需要将一个变量设置为“false”,并且在XMLHttpRequest完成时将该变量设置为“true”。然后,您可以在该变量为true时使用setTimeout进行监听。

7dl7o3gd

7dl7o3gd4#

window.onload是一个解决方案。window.onload在DOM准备就绪并且所有资源都加载到浏览器中时触发。换句话说,它在浏览器的圆圈停止旋转时触发。

mnemlml8

mnemlml85#

确保页面真正完成加载并不总是一件容易的工作,特别是对于依赖于通过 AJAX 加载内容的页面,以及异步加载的其他资产(每个资产都可以独立加载,并与其他资产并行加载,例如图像)。

我对处理此类情况的建议:

创建某个全局Deferred对象(一个承诺),并确保只有在它所依赖的一切都“就绪”之后才能解析它。

最小示例:

// start your web app code..
var p1 = new Promise();
var p2 = new Promise();
var p3 = new Promise();

// when all dependencies are done loading, means the page is truly "ready"
Promise.all([p1, p2, p3])
  .then(() => { 
       // page done loading
  });

// somewhere in the code...wait for Ajax content to load
// and resolve "p1" after the content has loaded
p1.resolve();

// somewhere in the code...wait for some other Ajax content to load
// and resolve "p2" after the content has loaded
p2.resolve();

// somewhere in the code...wait for all the images to load 
// (http://stackoverflow.com/a/1977898/104380)
// and resolve "p3"
p3.resolve();

关键是你需要手动确保所有异步的不同部分都被完全加载。这是一项乏味的工作,但它是一个非常可靠的解决方案。

相关问题