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

Question

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

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

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

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

编辑：

想象一下，根本没有Javascript的HTML文档。

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

这将执行我的脚本。

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

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

有可能知道??

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

Answer 1

浏览器qazxsw poi loadEventEnd指标可用于确定是否触发了load事件：

navigation performance

Answer 2

最简单的解决方案可能是检查

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

，请参阅document.readyState == 'complete'

Answer 3

快速回答

要快速回答问题的标题：

http://www.w3schools.com/jsref/prop_doc_readystate.asp

更深的例子

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

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

Answer 4

这是我的答案：

What is the non-jQuery equivalent of '$(document).ready()'?

fiddle

您可以阅读有关addEventListener（）及其兼容性（它是ECMAScript 5规范的新内容）

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

。这是未来做事的新“首选”方式。

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

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

here

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

How to check if DOM is ready without a framework?

Answer 5

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

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

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

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

Answer 6

怎么样覆盖window.load？

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

然后检查

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