javascript 预加载所有资产
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20763884/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Preloading all assets
提问by alh
Is there a single universal way to load all assets before using them? I am wanting to load some images, audio files, and a few .swffiles before my app starts. Currently, I load the images by creating new <img>elements and setting the srcto the image path, for the audio files I add the preload="auto"attribute in the <audio>tag and I perform an ajaxrequest to load the .swfs.
是否有一种通用的方法可以在使用之前加载所有资产？我想.swf在我的应用程序启动之前加载一些图像、音频文件和一些文件。目前，我通过创建新<img>元素并将 设置src为图像路径来加载图像，对于音频文件，我preload="auto"在<audio>标签中添加属性并执行ajax加载.swfs的请求。
Is there any problem (re some browsers not caching etc.) with the way I am currently loading my files and is there a 'best practices' way of collectively preloading all these file types before I display my content?
我当前加载文件的方式是否有任何问题（某些浏览器没有缓存等），是否有一种“最佳实践”方式可以在显示我的内容之前共同预加载所有这些文件类型？
回答by kumarharsh
Yes. Actually, this has been made into a standard. Here is the relevant RFC. A move to standardise this for HTML5 is in works
是的。实际上，这已经成为一个标准。这是相关的RFC。为 HTML5 进行标准化的举措正在进行中
Most modern browsers support prefetching. Here is a brief summary of how they are used:
大多数现代浏览器都支持预取。以下是它们如何使用的简要总结：
Firefox
火狐
As per MDN, you can use the <link>tags in head of the document,
根据 MDN，您可以使用<link>文档头部的标签，
<link rel="prefetch" href="/assets/my-preloaded-image.png">
as well as set HTTP Linkheader with the request, or within the HTML as a metatag.
以及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
Not only this, but you can also give navigation hints within the page, such as what will be the next page, etc.
不仅如此，您还可以在页面内提供导航提示，例如下一页是什么等。
<link rel="next" href="2.html">
IE 11
浏览器 11
In Internet Explorer too there is the Prefetchheader. You can set like so:
在 Internet Explorer 中也有Prefetch标头。你可以这样设置：
<link rel="prefetch" href="http://example.com/style.css" />
You can even prefetch (pre-resolve) DNS queries
您甚至可以预取（预解析）DNS 查询
<link rel="dns-prefetch" href="http://example.com/"/>
Or, prerender a web page (a-la Google Instant)
或者，预呈现网页（a-la Google Instant）
<link rel="prerender" href="http://example.com/nextpage.html" />
Chrome
铬合金
Chrome also does the same things as Firefox and IE in this regard.
在这方面，Chrome 也与 Firefox 和 IE 做同样的事情。
Safari
苹果浏览器
I have not been able to find solid proof of whether Safari supports these things. But reading up on many sources, I suspect they do, just that probably Apple is not so eager to market Safari as Microsoft is pushing IE11 (just an opinion).
我一直无法找到 Safari 是否支持这些东西的可靠证据。但是阅读了许多来源，我怀疑他们确实如此，只是苹果可能不像微软推动 IE11 那样急于推销 Safari（只是一个意见）。
Have fun. :)
玩得开心。:)
Sources:
资料来源：
- 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
- 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
Update: After compiling this answer, I stumbled upon a similar answer on SO, which gives more details on the topic. Please do have a look.
更新：编译这个答案后，我偶然发现了一个关于 SO 的类似答案，它提供了有关该主题的更多详细信息。请看一看。
回答by Tony Jose
Prealoding the assets, is one of the hardest as well as simplest tasks in a FLASH or HTML5 project because we have done FLASH to HTML5 conversion projects.
预加载资源是 FLASH 或 HTML5 项目中最难也是最简单的任务之一，因为我们已经完成了 FLASH 到 HTML5 的转换项目。
The easiest kinds of preloaders are static preloaders used to load the movie in which they exist. For these preloaders, all you need to do is stop the movie on a preloader screen, usually the first frame of the movie, and keep it there until you are able to determine that the movie has been completely loaded into the Flash player.
最简单的预加载器是静态预加载器，用于加载它们所在的电影。对于这些预加载器，您需要做的就是在预加载器屏幕上停止电影，通常是电影的第一帧，并将其保留在那里，直到您能够确定电影已完全加载到 Flash 播放器中。
The Preloader also stops any flickering or delay when changing uncached images on a web page since the same image has to be downloaded from the server every time it is needed to be displayed.
当更改网页上未缓存的图像时，预加载器还会停止任何闪烁或延迟，因为每次需要显示相同的图像时都必须从服务器下载相同的图像。
We have used jQuery HMTL5 Loaderin our web apps(HTML5), you can see the Github Repohere.
我们在我们的 Web 应用程序 ( HTML5) 中使用了jQuery HMTL5 Loader，您可以在此处查看Github Repo。
This plugin needs a JSON file to get the files that it has to preload, and it can preload images, html5 video and audio sources, script and text files. In addition to this, it has a different type of loaders (circular,line, big counter,etc) and additional features so on.
这个插件需要一个 JSON 文件来获取它必须预加载的文件，它可以预加载图像、html5 视频和音频源、脚本和文本文件。除此之外，它还具有不同类型的装载机（圆形、线形、大计数器等）和附加功能等。
It is implemented like this.
它是这样实现的。
<script>
var loaderAnimation = $("#html5Loader").LoaderAnimation();
$.html5Loader({getFilesToLoadJSON:'json file',
onUpdate: loaderAnimation.update,
debugMode:false
});
</script>
Its working perfectly in different browsers including Chrome, FireFox, Safari, Opera, etc and in mobile browsers.
它在不同的浏览器（包括 Chrome、FireFox、Safari、Opera 等）和移动浏览器中都能完美运行。
Note: We have used this for our HTML5 web applications which runs in different platforms including android and iOS.
注意：我们已将其用于在不同平台（包括 android 和 iOS）上运行的 HTML5 Web 应用程序。
回答by strah
You can use a PreloadJSlibrary (it is part of CreateJS suite). It's lightweight, easy to use and quite powerful in terms of configuration. It allows queueing, multiple connections, pausing, etc. It offers access to (progress, complete, etc) events.
您可以使用PreloadJS库（它是 CreateJS 套件的一部分）。它重量轻、易于使用且在配置方面非常强大。它允许排队、多个连接、暂停等。它提供对（进度、完成等）事件的访问。
If you have some Actionscript experience this tool should be quite straight forward for you.
如果您有一些 Actionscript 经验，这个工具对您来说应该非常简单。
回答by Siva Tumma
Try using $(window).load(function(){ /* Use any of your resources */ });.
尝试使用$(window).load(function(){ /* Use any of your resources */ });.
I tried this and working for me. this. Since this is a plain javascript api, you can also use like window.onload=function(){/* JavaScriptCode */};I believe.
我试过这个并对我来说有效。这个。由于这是一个普通的 javascript api，您也可以像window.onload=function(){/* JavaScriptCode */};我相信的那样使用。
回答by Bangkokian
I been really happy with PxLoader: http://thinkpixellab.com/pxloader/
我对 PxLoader 非常满意：http://thinkpixellab.com/pxloader/
It's an extremely easy to use, lightweight preloader for use in HTML5 apps. You can download images, audio, or any other file-type. It lets you monitor completed events as well.
这是一个非常易于使用的轻量级预加载器，可用于 HTML5 应用程序。您可以下载图像、音频或任何其他文件类型。它还允许您监视已完成的事件。
It's free to use (MIT license) and forkable on GitHub.
它可以免费使用（MIT 许可）并且可以在 GitHub 上分叉。
There are some good demos and script samples here: http://thinkpixellab.com/pxloader/#sample1
这里有一些很好的演示和脚本示例：http: //thinkpixellab.com/pxloader/#sample1
