预加载脚本文件

Posted 2023-05-07

【中文标题】预加载脚本文件

【英文标题】：Preload script file

【发布时间】：2011-04-05 00:36:45

【问题描述】：

有很多插件可以预加载图片，但是有没有办法预加载 javascript？我的应用程序使用一个大的 js 文件，在页面显示之前加载大约需要 5 秒左右......那么，有没有办法在我以某种方式预加载脚本的同时显示“加载消息”？ （类似于 Gmail 中的“正在加载...”）

谢谢

【问题讨论】：

MooTools 内置方法：mootools.net/docs/more/Utilities/Assets#Asset:javascript 。还有 jQuery？

【参考方案1】：

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

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

【参考方案2】：

这是当前的标准：

<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);

要检查您的浏览器是否与它兼容，只需使用以下 sn-p 代码： 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

【参考方案3】：

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

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

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

【参考方案4】：

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

<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 个字母的单词来表示类型并歇斯底里地傻笑。

更新

也适用于内联脚本。