如何引用延迟加载的脚本标记JSON文件内容从JavaScript？

Question

我希望JSON文件的加载不会中断正常的页面加载，因此即使JSON为5MB大，应用程序仍然会执行其他关键功能，而此后将加载这个巨大的JSON。

挑战来了，因为这个JSON文件真的加载在推迟脚本标记中，我想如何引用它在我的JavaScript内？我的JavaScript如何知道它，如果我只是在</body>结束之前加载JSON文件？

任何想法或甚至是一个很好的替代方案来实现这一点将不胜感激。

谢谢！

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 ===========*/ 
}); 

如果你的代码是拆分多个脚本文件，您可以在每个脚本文件中侦听该事件！