预加载脚本文件

Question

有许多插件可以预加载图像,但有没有办法预加载javascript？我的应用程序使用一个大的js文件,在页面显示之前加载大约需要5秒左右...所以,有什么方法可以显示"加载消息"而我以某种方式预加载脚本？(有点像'加载......',就像在Gmail中一样)

谢谢

Answer 1

这是当前的标准：

<link href="/js/script-to-preload.js" rel="preload" as="script">
...

或者你可以直接附加它

var preloadLink = document.createElement("link");
preloadLink.href = "script-to-preload.js";
preloadLink.rel = "preload";
preloadLink.as = "script";
document.head.appendChild(preloadLink);

然后当你想使用它时：

<script src="/js/script-to-preload.js"></script>

或者

var preloadedScript = document.createElement("script");
preloadedScript.src= "/js/script-to-preload.js";
document.head.appendChild(preloadedScript);

要检查您的浏览器是否与其兼容，只需使用以下代码片段： https: //gist.github.com/yoavweiss/8490dabb3e0aa112fc74

如果不支持，您可以使用已弃用的prefetch代替preload

来源：

https://w3c.github.io/preload/#x2.link-type-preload

https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content

https://developer.mozilla.org/en-US/docs/Web/API/DOMTokenList/supports

Answer 2

$.getScript('script.js',function(){
  //this is your callback function to execute after the script loads
});

getScript应该可以正常工作.当脚本加载时(我假设在一个动作或什么？)显示加载消息并调用getScript,然后在回调区域中,将"加载"的文本更改为"完成"并执行您想要的任何内容.