jQuery.html5Loader can preload images, html5 video and audio sources, css, scripts and text files. This plugin needs a JSON file to get the files that must be preloaded (you can use also use a javascript object as well), and it provides an easy API to give you the the amount of file loaded in percentage.

All the javascript and css files will be automatically loaded and injected into the DOM

• smart: it loads just the sources supported by the client running the script.
• flexible: it returns the current percentage and the object loaded, so you could be free to show this info as you like
• fun: inside the package you could find some preloading animation examples, customizable and ready to use

• Append the files loaded on the fly
• Big counter animation
• Circular preloader
• Line preloader

• http://www.mobi-myhome.ch
• http://lindberghallee.ch

{
    "files": [
      {
        "type":"SCRIPT",
        "source":"../path/to/your/script.js",
        "size":4.096
      },
      {
        "type":"IMAGE",
        "source":"../path/to/your/image.jpg",
        "size":620
      },
      {
        "type": "CSS",
        "source": "../files/test.css",
        "size": 16.819
      },
      {
        "type":"TEXT",
        "source":"../path/to/your/text.txt",
        "size":44
      },
      {
        "type":"VIDEO",
        "sources": {
          "webm":{
            "source":"../path/to/your/video.webm",
            "size":5054.976
          },
          "ogg":{
            "source":"../path/to/your/video.ogg",
            "size":2932.736
          },
          "mp4":{
            "source":"../path/to/your/video.mp4",
            "size":9285.632
          }
        }
      },
      {
        "type":"AUDIO",
        "sources": {
          "mp3":{
            "source":"../path/to/your/audio.mp3",
            "size":9285.632
          },
          "ogg":{
            "source":"../path/to/your/audio.ogg",
            "size":2089.688
          }
        }
      }
    ]
  }

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="../js/jQuery.html5Loader.js"></script>

$.html5Loader({
      filesToLoad:    '../js/files.json', // this could be a JSON or simply a javascript object
      onBeforeLoad:       function () {},
      onComplete:         function () {},
      onElementLoaded:    function ( obj, elm) { },
      onUpdate:           function ( percentage ) {}    
}); 

• onBeforeLoad It is triggered right before the plugin starts loading all the files
• onComplete It is triggered when the plugin finishes to load all the sources
• onMediaError This function is called in case there's an error during the preloading
  • obj original object passed to the plugin
  • elm html output (for type "SCRIPT" and "TEXT" this value is just a string)
• onElementLoaded It is triggered anytime a new element of your files list gets loaded, (ATTENTION IF AN ELEMENT IS NOT SUPPORTED IT WILL NEVER PASS TROUGH THIS FUNCTION).
  • obj original object passed to the plugin
  • elm html output (for type "SCRIPT" and "TEXT" this value is just a string)
• onUpdate it is triggered anytime new bytes are loaded
  • percentage the percentage currently loaded

• Internet Explorer 9 and 10 do not return any value using the method canPlayType on a video or audio element ( http://modernizr.com/docs/#audio ). For these browsers we don't preload any HTML5 media format
• on mobile devices and on the iPad we cannot load any video or audio element because these devices can't preload those kind of elements until the user start dealing with them