Question

我正在写一个Javascript脚本。该脚本可能是异步加载的（AMD格式）。

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

但是如果在window.load事件之后加载脚本......我怎么知道window.load已经被触发了？

当然我不想在任何其他脚本中添加内容（它们都是异步加载，问题是相同的）:)）

编辑：

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

有人在此doc文件中插入一个标记，并且此脚本标记会加载我的Javascript文件。

这将执行我的脚本。

此脚本如何知道window.load是否已被触发？

没有jQuery，也不是我之前HTML文档中的任何脚本。

有可能知道??

我找到了window.document.readystate属性。此属性用于文档“就绪”事件我gess，而不是窗口“加载”。窗口“加载”事件有什么类似的东西吗？

Answer 1

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

Answer 2

快速解答

要快速回答问题的标题，请执行以下操作：

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。如果您现在立即在此窗口中将其放入控制台，则应评估为true。

另请参见：What is the non-jQuery equivalent of '$(document).ready()'?

Answer 3

浏览器navigation performance 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');
}

Answer 4

以下是我的回答：

fiddle

window.addEventListener("load", function () {
    window.loaded = true;
});

function logLoaded() {
    console.log("loaded");
}

(function listen () {
    if (window.loaded) {
        logLoaded();
    } else {
        console.log("notLoaded");
        window.setTimeout(listen, 50);
    }
})();

您可以阅读有关addEventListener（）及其兼容性（它是ECMAScript 5规范的新内容）here。这是未来做事的新“首选”方式。

您可以阅读立即调用函数表达式（IIFE）（或者，自调用匿名函数或立即调用匿名函数）here。

编辑：这是StackOverflow上的一个很好的答案：

How to check if DOM is ready without a framework?

如果您特别想知道DOM加载事件是否已触发，请在DOM“load”事件处理程序中设置一个全局变量，然后在新代码加载时检查它是否存在。

// in 'load' event handler
window.domLoadEventFired = true;

// in code you are loading asynchronously
if (typeof window.domLoadEventFired !== undefined) {
    // ...
}

Answer 5

如果您不想使用jQuery，它使用的逻辑是：

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

因此，在Windows加载事件和检查文档的body属性是否可用之间，您可以检查DOM是否已准备就绪

Answer 6

基于@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();
  }
}

Answer 7

覆盖window.load怎么样？

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

然后检查

if (window.loaded != undefined && window.loaded == true){
    //do stuff
}

如何知道窗口“load”事件是否已被触发

7 个答案:

快速解答

更深入的示例