Question

143

Preloading all assets

rated 0 times [ 150] [ 7] / answers: 1 / hits: 21318 / 11 Years ago, tue, december 24, 2013, 12:00:00

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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

rocky

Add To Favorites

Follow

Total Points: 316

Total Questions: 108

Total Answers: 110

Location: Mali

Member since Sat, Feb 12, 2022

2 Years ago

answered 11 Years ago cadendericki · Accepted 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.

How can I preload a page using HTML5?