Question

我有一个带有窗口加载事件的空白页面，并且它工作正常，直到我不通过导入（es6模块）+ JSPM（babel transpiler）包含jquery库来使事情正常工作，无法找到原因，任何想法？

这就是我在页面中得到的所有内容：

app.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>

P.S。我在htmt

中没有正文载入等

解决！

JSPM仅在开发模式下加载模块async，在生产模式下所有模块和库已经捆绑到一个文件中，所以事情加载同步，所有工作都很好。谢谢@ 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 event
app.js running

......你知道你错过了这个活动。

如果您定位的是现代浏览器，则可以修改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的浏览器，您可能需要在load（blech）中连接index.html事件处理程序，或者使用jQuery ready功能。如果您使用ready，请注意它不能以异步方式可靠地调用您的函数（如果ready已被触发，它将同步）。： - |此外，ready比load更早发射（通常这是一件好事，但如果您依赖已加载的图像......）。

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

1 个答案: