Preloading all assets

Question

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 1

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?

Answer 2

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.

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.

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 Loader in our web apps(HTML5), you can see the Github Repo here.

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.

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.

Note: We have used this for our HTML5 web applications which runs in different platforms including android and iOS.

Answer 3

You can use a PreloadJS library (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.

If you have some Actionscript experience this tool should be quite straight forward for you.

Answer 4

Try using $(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.

Answer 5

I been really happy with 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.

It's free to use (MIT license) and forkable on GitHub.

There are some good demos and script samples here: http://thinkpixellab.com/pxloader/#sample1