预加载所有资源

Question

预加载所有资源

28

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

我当前的加载方式存在任何问题（例如某些浏览器不缓存等），是否有“最佳实践”方法来集体预加载所有这些文件类型，以在显示内容之前加载它们？

- alh

您有任何特定的浏览器要求吗？ - Andrew

@Andrew 没有具体要求。最好是支持的浏览器/版本范围最广的解决方案；Chrome + FF + 新版IE的基础是可以的。 - alh

这个问题被标记为javascript、jquery和html5，但只用html5回答了。建议编辑问题，删除javascript和jquery，以便回答完整问题。因为目前答案中没有任何javascript内容，但我通过在谷歌上搜索“javascript预加载资产的代码”找到了这里。真的是严肃的 :|。 - Belldandu

5个回答

25

在 FLASH 或 HTML5 项目中，预加载资产是最困难和最简单的任务之一，因为我们已经完成了 FLASH 到 HTML5 的转换项目。

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

预加载器还可以防止更改 Web 页面上未缓存的图像时出现闪烁或延迟，因为每次需要显示相同的图像时都必须从服务器下载该图像。

我们在我们的 Web 应用程序（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网页应用程序中使用了它，该应用程序在包括Android和iOS在内的不同平台上运行。

- Tony Jose

1

确实是一项有趣的项目！ - kumarharsh

2

您可以使用PreloadJS库（它是CreateJS套件的一部分）进行操作。它体积轻，易于使用，配置方便且功能强大。它允许排队，多个连接，暂停等。它提供对进度，完成等事件的访问。

如果您有一些Actionscript经验，那么这个工具对您来说应该很容易理解。

- strah

1

我一直很喜欢PxLoader: http://thinkpixellab.com/pxloader/。它是一种非常易于使用的、轻量级的预加载器，可用于HTML5应用程序。您可以下载图像、音频或任何其他文件类型。它还可以让您监视完成事件。它是免费使用的（MIT许可证），并且在GitHub上可以进行分支。这里有一些很好的演示和脚本样例：http://thinkpixellab.com/pxloader/#sample1。

- Bangkokian

1

尝试使用$(window).load(function(){ /* 使用你的任何资源 */ });。

我尝试过这个方法，它对我有效。this。由于这是一个纯JavaScript API，你也可以像这样使用：window.onload=function(){/* JavaScriptCode */};。

- Siva Tumma

1

已知的问题是加载图片在不同的浏览器中不一定总能成功加载所有的图片。 - skmasq

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- kumarharsh · Accepted Answer

是的。实际上，这已经成为了一项标准。这里是相关的RFC。正在进行将其纳入HTML5标准化的工作in works。

大多数现代浏览器都支持预取。以下是它们使用方式的简要概述：

Firefox

根据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 Instant）

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

Chrome

Chrome在这方面也和Firefox和IE做同样的事情。

Safari

我没有找到确凿的证据证明Safari支持这些内容。但是通过阅读多个来源，我怀疑它们支持，只是可能苹果不像微软推动IE11那样热衷于营销Safari（仅代表个人观点）。

玩得开心。 :)

来源：

更新：在编写本答案后，我偶然发现了一个类似的SO答案，该答案对该主题提供了更多详细信息。请务必查看。

如何使用HTML5预加载页面？