Preloading all assets
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 .swf files before my app starts. Currently, I load the images by creating new <img> elements and setting the src to the image path, for the audio files I add the preload="auto" attribute in the <audio> tag and I perform an ajax request to load the .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?
Answer
Yes. Actually, this has been made into a standard. Here is the relevant RFC. A move to standardise this for HTML5 is in works
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,
<link rel="prefetch" href="/assets/my-preloaded-image.png">
as well as set HTTP Link header with the request, or within the HTML as a meta tag.
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
In Internet Explorer too there is the Prefetch header. You can set like so:
<link rel="prefetch" href="http://example.com/style.css" />
You can even prefetch (pre-resolve) DNS queries
<link rel="dns-prefetch" href="http://example.com/"/>
Or, prerender a web page (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.
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).
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
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.