Question

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

由于

Answer 1

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

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

Answer 2

将脚本加载到iframe中，并且应该将其缓存。如果您尝试将其添加为img标记的来源，它也可能有效。完成其余组件的加载后，您可以使用大脚本添加脚本标记，以便将其加载到页面上。我不确定这会解决你的问题。您确定要“预加载”还是等到页面完成渲染然后加载大型JS脚本？

如果你想要后者，那么你应该等到load或文件ready事件被触发才能加载脚本。

提示：您还可以将脚本放在单独的（子）域中。这允许一些浏览器并行加载更多资源，因此它不会阻止网站的其余部分加载，尽管默认情况下许多新浏览器会这样做。

Answer 3

这是目前的标准：

<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 4

第1步：将type标签的script属性设置为无效的内容，例如“ invalid”或您喜欢的脏话。

<script type="invalid" src="path/to/script.js" id='myScript'></script>

第2步：稍后，在脚本加载完成后（例如，在window.onload事件发生之后），只需执行以下操作：

var myScript = document.getElementById('myScript');
document.head.removeChild(myScript);
myScript.setAttribute('type', 'text/javascript');
document.head.appendChild(myScript);

如果以此方式进行操作，您将成为违法行为。餐桌上的举止和最佳实践人群会发抖-该类型不在规格范围内-计算机将展开！！ 。因此，您最好使用4个字母的单词作为类型，然后歇斯底里地咯咯笑。

更新

还可以与内联脚本一起使用。

预加载脚本文件

4 个答案: