当通过导入包含 jQuery 时，窗口加载事件不会触发

window load event doesn't fire when jquery included via import

本文关键字：事件 加载 窗口 导入 包含 jQuery      更新时间：2023-09-26

我有带有窗口加载事件的空白页面，它工作正常，直到我没有通过导入(es6 模块(+ JSPM(babel 转译器(包含 jquery 库来让事情正常工作，找不到原因，有什么想法吗？

这就是我在页面中得到的全部内容：

应用.js

"use strict";
import "jquery"; // if i remove this event will fire
window.addEventListener("load", function(event){
    console.log("loaded");
}, true);

在我的 HTML 中，我执行以下操作(在开发模式下 ofc(

索引.html 

<script src="jspm_packages/system.js"></script>
<script src="jspm.config.js"></script>
<script>
    System.import("assets/js/app");
</script>

附言我在 htmt 中没有身体负载等

解决！

JSPM 仅在开发模式下异步加载模块，在生产模式下，所有模块和库都已捆绑到一个文件中，因此事物加载同步并且一切正常。谢谢@T.J.克劳德

我怀疑你会发现System.import异步导入的东西，所以你有一个竞争条件。当您删除 jQuery 的导入时，您的代码加载和运行速度会更快，让它在 window.load 事件触发之前发生。导入代码时，运行代码会延迟(等待加载 jQuery 文件(，并且您错过了事件。

您可以轻松确定是否是这种情况(请参阅注释(：

index.html ：

<script src="jspm_packages/system.js"></script>
<script src="jspm.config.js"></script>
<script>
    window.addEventListener("load", function(event){    // Added
        console.log("index.html - got load event");     // Added
    }, true);                                           // Added
    System.import("assets/js/app");
</script>

app.js ：

"use strict";
import "jquery"; // if i remove this event will fire
console.log("app.js running");                          // Added
window.addEventListener("load", function(event){
    console.log("loaded");
}, true);

如果您看到以下内容：

索引.html - 获取加载事件应用程序.js正在运行

。你知道你错过了这次活动。

如果您的目标是现代浏览器，则可以修改app.js代码以通过document.readyState处理这种情况：

"use strict";
import "jquery";
function loadCallback() {
    console.log("loaded");
}
if (document.readyState === "complete") {
    setTimeout(loadCallback, 0);
} else {
    window.addEventListener("load", loadCallback, true);
}

(请注意，为了避免混乱，我们始终异步调用loadCallback，以便上述块后面的任何代码在运行之前都已可靠地完成。

如果您需要支持不提供document.readyState的浏览器，您可能需要在 index.html (blech( 中挂接您的 load 事件处理程序，或者交替使用 jQuery 的 ready 功能。如果您使用 ready ，请注意它不能可靠地异步调用您的函数(如果ready已经触发，它将是同步的(。:-|此外，ready触发的时间比load早得多(通常这是一件好事，但如果您依赖于已加载的图像......

相关文章：