首先是 document.load 或 window.load [重复]

Posted 2023-05-07

【中文标题】首先是 document.load 或 window.load [重复]

【英文标题】：Which come first document.load or window.load [duplicate]

【发布时间】：2018-05-04 11:10:44

【问题描述】：

当我尝试 NProgress.js 时，如文档所述，文档加载时启动它，而窗口加载时停止它。但我发现情况是相反的；如果 NProgress.done before 开始，进度将永远不会结束。

    if (typeof NProgress != 'undefined') 
        $(document).ready(function () 
            NProgress.done(); 
            console.log( "document loaded" );
        );

        $(window).on("load", function() 
            console.log( "window loaded" );
            NProgress.start();
        ); 
    ; 

上面的控制台日志将在“文档加载”之前显示“窗口加载”。 我已经交换了上面的代码以使其工作。有什么想法吗？

我想我发布了一个误导性问题。我确实了解 .ready 和 .load 事件。实际上我正在将 NProgress.js 应用到我的网页上，我注意到进度永远不会完成加载[由于在 .start() 之前调用了 .done()。] 所以我“实验”了这两个事件，发现那些2个事件没有相应地遵循。现在，我上面的代码有效。但不遵循书面惯例，因此我寻求意见。

【问题讨论】：

@Rajesh：不是重复的。但这个问题有答案。

@Krumia 你很难得到完全相同的副本。但我想这符合相对重复的条件。

这段代码在哪里/如何调用？还有什么浏览器？ jQuery 有时会“模拟”事件。无论如何，IMOHO 唯一“安全”的方法是添加适当的排序守卫.. 虽然 NProgress.start 可能应该在任何一个事件“之前”完成？

您要求document load vs window load ...但您的代码正在使用$(document).ready ...并且document没有load事件

$(window).on("load" 与window.addEventListener('load' 相同...有一个名为“DOMContentLoaded”的文档事件将在window load 之前触发...文档就绪是最后触发

【参考方案1】：

当load和ready事件在文档加载之前被附加并且DOM准备就绪，那么ready事件应该在load事件之前被调用。

对于 jQuery 3.2.1，可以创建一个设置，其中可以在 jquery load 事件之后调用 ready 事件，而本机事件按照规范 12.2.7 The end 定义的顺序调用：

window.addEventListener('load', function(e) 
  console.log('load');
, true);

document.addEventListener('DOMContentLoaded', function(e) 
  console.log('DOMContentLoaded');
, true);

$(document).ready(function() 
  console.log("jquery: ready");
);

$(window).on("load", function() 
  console.log("jquery: loaded");
);

输出

DOMContentLoaded
load
jquery: loaded
jquery: ready

jsfiddle demo

所以在我看来，如果在 load 之后调用 ready，这是 3.2.1 的错误。

【讨论】：

请注意编辑器中的<> 图标。你可以用它来创建一个sn-p

@Rajesh 使用 SO 的剪切工具无法重现它。很可能是因为它将脚本注入到body 而不是head。

我正在使用 Thymeleaf 和 Spring Boot，“注入”声音与我的情况相关。我的 NProgress 在主页模板中，所有动态内容都相似。