Question

在使用之前是否有一种通用方式加载所有资产？我想在我的应用程序启动之前加载一些图像，音频文件和一些.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标头，或在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/"/>

或者，预呈现网页（Google即时消息）

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

铬

Chrome还在this regard中执行与Firefox和IE相同的操作。

Safari浏览器

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

玩得开心。：）

来源：

更新：编译完这个答案后，我偶然发现了一个关于SO的类似答案，它提供了有关该主题的更多细节。请看看。

How can I preload a page using HTML5?

Answer 2

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

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

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

我们在网络应用中使用了jQuery HMTL5 Loader（ HTML5 ），您可以在此处看到Github Repo。

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

它是这样实现的。

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

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

注意：我们已将此用于HTML5网络应用程序，这些应用程序在不同的平台上运行，包括Android和iOS。

Answer 3

您可以使用PreloadJS库（它是CreateJS套件的一部分）。它重量轻，易于使用，在配置方面非常强大。它允许排队，多个连接，暂停等。它提供对（进度，完整等）事件的访问。

如果你有一些Actionscript经验，这个工具对你来说应该很直接。

Answer 4

尝试使用$(window).load(function(){ /* Use any of your resources */ });。

我试过这个并为我工作。 this。由于这是一个简单的javascript api，你也可以像window.onload=function(){/* JavaScriptCode */};一样使用我相信。

Answer 5

我对PxLoader非常满意：http://thinkpixellab.com/pxloader/

这是一款非常易于使用的轻量级预加载器，适用于HTML5应用。您可以下载图像，音频或任何其他文件类型。它还允许您监控已完成的事件。

可以在GitHub上免费使用（MIT许可证）和forkable。

这里有一些很好的演示和脚本示例：http://thinkpixellab.com/pxloader/#sample1

预加载所有资产

5 个答案:

火狐

IE 11

铬

Safari浏览器

来源：