javascript - 预加载所有 Assets

Question

有没有一种通用的方法可以在使用之前加载所有 Assets ？我想加载一些图像、音频文件和一些 .swf我的应用程序启动前的文件。目前，我通过创建新的 <img> 来加载图像元素并设置 src到图像路径，对于音频文件，我添加了 preload="auto" <audio> 中的属性标记，然后我执行 ajax请求加载 .swf

我当前加载文件的方式是否存在任何问题(某些浏览器未缓存等)，是否有“最佳实践”方式在显示我的内容之前共同预加载所有这些文件类型？

Answer 1

是的。实际上，这已经成为一个标准。这是相关的RFC .为 HTML5 对此进行标准化的举措是 in works

大多数现代浏览器都支持预取。以下是如何使用它们的简要总结:

火狐

根据 MDN，您可以使用 <link>文档头部的标签，

<link rel="prefetch" href="/assets/my-preloaded-image.png">

以及设置 HTTP Link带有请求的 header ，或在 HTML 中作为 meta标签。

Link: </assets/my-preloaded-image.png>; rel=prefetch
<meta http-equiv="Link" content="</assets/my-preloaded-image.png>; rel=prefetch">
enter code here

不仅如此，你还可以在页面内给出导航提示，比如下一页是什么等等。

<link rel="next" href="2.html">

IE 11

在 Internet Explorer 中也有 Prefetch header 。你可以这样设置:

<link rel="prefetch" href="http://example.com/style.css" />

您甚至可以预取(预解析)DNS 查询

<link rel="dns-prefetch" href="http://example.com/"/>

或者，预呈现一个网页(a-la Google Instant)

<link rel="prerender" href="http://example.com/nextpage.html" />

Chrome

在 this regard 中，Chrome 也做与 Firefox 和 IE 相同的事情。 .

Safari

我无法找到 Safari 是否支持这些东西的可靠证据。但是阅读许多来源，我怀疑他们确实如此，只是苹果可能不像微软插入 IE11 那样急于推销 Safari(只是一种意见)。

玩得开心。 :)

来源:

• http://msdn.microsoft.com/en-us/library/ie/dn265039%28v=vs.85%29.aspx
• https://developer.mozilla.org/en/docs/Link_prefetching_FAQ
• http://davidwalsh.name/html5-prefetch
• https://developers.google.com/chrome/whitepapers/prerender
• https://docs.google.com/presentation/d/18zlAdKAxnc51y_kj-6sWLmnjl6TLnaru_WH0LJTjP-o/present#slide=id.g120f70e9a_0140

---

更新:编译完这个答案后，我偶然发现了一个关于 SO 的类似答案，其中提供了有关该主题的更多详细信息。请务必看一看。

How can I preload a page using HTML5?