预加载所有资产

Question

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

我目前正在加载文件的方式是否存在任何问题(某些浏览器没有缓存等),并且在显示我的内容之前是否有"最佳实践"方法集体预加载所有这些文件类型？

Answer 1

是.实际上,这已经成为一个标准.这是相关的RFC.为HTML5标准化的举措正在进行中

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

火狐

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

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

以及Link在请求中设置HTTP 标头,或在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标头.你可以像这样设置:

<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也做与Firefox和IE相同的事情.

苹果浏览器

我无法找到Safari是否支持这些内容的可靠证据.但阅读许多消息来源,我怀疑他们这样做,只是因为苹果并不急于推销Safari,因为微软推动了IE11(仅仅是一种意见).

玩得开心.:)

资料来源:

• 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的类似答案,它提供了有关该主题的更多细节.请看看.

如何使用HTML5预加载页面？

Answer 2

预先对资产进行预编码是FLASH或HTML5项目中最难也是最简单的任务之一,因为我们已经完成了FLASH到HTML5的转换项目.

最简单的预加载器类型是静态预加载器,用于加载它们存在的电影.对于这些预加载器,您需要做的就是在预加载器屏幕上停止播放电影,通常是电影的第一帧,并将其保留在那里直到您能够确定电影已完全加载到Flash播放器中.

预加载器还可以在更改网页上的未缓存图像时停止任何闪烁或延迟,因为每次需要显示时都必须从服务器下载相同的图像.

我们在我们的网络应用程序(HTML5)中使用了jQuery HMTL5 Loader,你可以在这里看到Github Repo.

这个插件需要一个JSON文件来获取它必须预加载的文件,它可以预加载图像,html5视频和音频源,脚本和文本文件.除此之外,它还有不同类型的装载机(圆形,线形,大计数器等)和其他附加功能.

它是这样实现的.

<script>
        var loaderAnimation = $("#html5Loader").LoaderAnimation();
        $.html5Loader({getFilesToLoadJSON:'json file',
            onUpdate: loaderAnimation.update,
            debugMode:false
        });
    </script>

它可以在不同的浏览器中完美运行,包括Chrome,FireFox,Safari,Opera等,以及移动浏览器.

注意:我们已经将它用于我们的HTML5 Web应用程序,它们运行在不同的平台上,包括android和iOS.