72

我正在编写一个 Javascript 脚本。该脚本可能会异步加载(AMD 格式)。

window.load在这个脚本中,在事件被触发之前,我不想做任何重要的事情。所以我听窗口“加载”事件。

但是如果脚本是在 window.load 事件之后加载的......我怎么知道window.load已经被解雇了?

当然我不想在任何其他脚本中添加一些东西(它们都是异步加载的,问题是一样的):)

编辑 :

想象一个完全没有 Javascript 的 HTML 文档。

比有人在这个文档中插入一个标签,这个脚本标签加载我的 Javascript 文件。

这将执行我的脚本。

这个脚本如何知道 window.load 是否已经被触发?

没有 jQuery,在我之前的 HTML 文档中没有任何脚本。

有可能知道吗??

我找到了window.document.readystate房产。我猜这个属性是针对文档“就绪”事件,而不是针对窗口“加载”。窗口“加载”事件有类似的东西吗?

4

7 回答 7

62

最简单的解决方案可能是检查document.readyState == 'complete',请参阅http://www.w3schools.com/jsref/prop_doc_readystate.asp

于 2015-01-22T16:17:21.080 回答
36

快速回答

要快速回答问题的标题:

document.readyState === 'complete'

更深层次的例子

如果您想在窗口加载时调用代码,下面是一个很好的帮手,同时仍然处理在代码运行时窗口可能已经加载的情况。

function winLoad(callback) {
  if (document.readyState === 'complete') {
    callback();
  } else {
    window.addEventListener("load", callback);
  }
}

winLoad(function() {
  console.log('Window is loaded');
});

注意:此处的代码片段实际上不会在相同的窗口上下文中运行,因此实际上会在您运行它时document.readyState === 'complete'进行评估。false如果您现在为此窗口将相同的内容放入控制台,它应该评估为真。

另请参阅'$(document).ready()' 的非 jQuery 等价物是什么?

于 2019-01-14T10:29:38.093 回答
14

浏览器导航性能loadEventEnd 指标可用于确定是否触发了加载事件:

let navData = window.performance.getEntriesByType("navigation");
if (navData.length > 0 && navData[0].loadEventEnd > 0)
{
    console.log('Document is loaded');
} else {
    console.log('Document is not loaded');
}
于 2018-11-28T18:01:38.040 回答
0

如果你不想使用 jQuery,它使用的逻辑是:

if( !document.body )
    setTimeout( checkAgain, 1 );

因此,在 windows 加载事件和检查文档的 body 属性是否可用之间,您可以检查 DOM 是否准备好

于 2012-11-13T16:47:01.570 回答
0

基于@CTS_AE 的方法,我为以下环境制定了一个解决方案:

  • window.addEventListener('load', activateMyFunction);
  • window.addEventListener('DOMContentLoaded', activateMyFunction);

不工作。

它需要单个字符替换(例如,从

window.addEventListener('load', activateMyFunction);

window_addEventListener('load', activateMyFunction);)

该函数window_addEventListener()如下所示:

const window_addEventListener = (eventName, callback, useCapture = false) => {

  if ((document.readyState === 'interactive') || (document.readyState === 'complete'))   {

    callback();
  }
}
于 2019-09-26T09:12:19.667 回答
0

简易方法:

window.onload = (event) => {
  console.log('page is fully loaded');
};

您可以从这里的资源中找到其他方法。

于 2022-02-02T13:54:02.807 回答
-4

覆盖window.load怎么样?

window._load = window.load;
window.load = function(){
  window.loaded = true;
  window._load();
}

然后检查

if (window.loaded != undefined && window.loaded == true){
    //do stuff
}
于 2012-11-13T16:31:51.160 回答