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

Question

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

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

应用程序.js

"use strict";

import "jquery"; // if i remove this event will fire

window.addEventListener("load", function(event){
    console.log("loaded");
}, true);

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

index.html

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

附言我在 htmt 中没有 body onload 等

已解决!

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

Answer 1

我怀疑您会发现 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);

如果你看到这个:

index.html - got load eventapp.js running

...you know that you missed the event.

If you're targeting modern browsers, you can modify your app.js code to handle that case via 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，以便上面 block 后面的任何代码在运行之前可靠地完成。)

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