刷新后未调用文档加载事件

Question

我有以下功能：

jQuery(document).ready(function(){
    window.addEventListener("load", function (){
        alert("hello");
});

它在第一个运行上工作，但当我点击刷新按钮时它停止工作。

如果我清空缓存或硬重新加载，它会再次工作一次。

这是怎么回事？我该如何解决这个问题？

Answer 1

尝试在 jQuery 的 document.ready() 之外添加处理程序：

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

jQuery(document).ready(function(){
  ...
};

在第一个运行页面上加载外部资源（例如图像）可能需要一些时间。在此期间调用 jQuery(document).ready(...)。

当它完成加载外部资源时，load 事件被触发并且函数正常工作。

奇怪的是，在刷新时，资源已经被缓存了，所以 window.load 事件被触发得如此之快，并且发生在之前 jQuery(document).ready()，并且因为您在事件触发后添加事件处理程序，不会调用处理程序。当您清除缓存时，它再次工作。

或者，您可以先检查文档是否完成，如下所示：

function document_loaded(){
    // To be called when the document is loaded.
    ...
};

document.readyState == "complete" ? document_loaded() : window.addEventListener("load", document_loaded);

无论您将代码放在何处，这都将起作用。

Answer 2

如果你想运行每次加载页面时都执行一个脚本，最好的方法是将代码直接放入主函数中：

jQuery(document).ready(function(){
    alert("hello");
};

来自文档：https://learn.jquery.com/using-jquery-core/document-ready/：

Code included inside $( document ).ready() will only run once the page Document Object Model (DOM) is ready for JavaScript code to execute.

如果你还想等待你的资源加载完成，你应该写：

jQuery(window).on("load", function(){
    alert("hello");
});

刷新后未调用文档加载事件

Document load event not being called after refresh

javascript

jquery

dom-events