如何从 javascript 引用延迟加载的脚本标签 json 文件内容？

Question

我希望 JSON 文件的加载不会干扰正常的页面加载，所以即使 JSON 有 5mb 大，应用程序仍会在这个巨大的 JSON 将在之后加载。

挑战在于，由于这个 JSON 文件实际上是在 defer 脚本标记中加载的，我应该如何在我的 javascript 中引用它？如果我只是在 </body> 结束之前加载 JSON 文件，我的 javascript 怎么知道它？

我们将不胜感激任何实现此目的的想法或更好的替代方法。

谢谢！

Answer 1

您可以异步加载 JSON 然后触发一个事件！喜欢：

yourScript.js（其中包含 JSON）

window.myJSON = {...A lot of JSON}
const event = new CustomEvent("myJson-loaded", {"myJson": window.myJSON})
document.dispatchEvent(event)

您所有的 javascript 现在都可以像这样工作了：

document.addEventListener("myJson-loaded", function(e) {
    // Prints contents of window.myJSON, you can also, access it via the global variable myJson.
    console.log(e.detail)
    /*========= All your JS code here ===========*/
});

如果您的代码库分布在多个脚本文件中，您可以在每个脚本文件中监听该事件！

如何从 javascript 引用延迟加载的脚本标签 json 文件内容？

How to reference defer loaded script tag json file content from javascript?

javascript

browser

json

script-tag

deferred