This class allows you to preload all of your images, sounds, videos, JSON, JavaScript and CSS files with one call. It provides you with progress reports and lets you know when everything is done.
It requires MooTools and MooTools More with the Assets and Request.JSONP boxes ticked. I have attached a copy of the required MooTools More version to this gist.
You can find an example here on jsFiddle.
Here is the code used in that example.
var loader = new Preloader({
images: {
small: 'http://placehold.it/100x100',
large: 'http://placehold.it/200x200'
},
sounds: {
nyan: 'http://upload.wikimedia.org/wikipedia/en/2/2a/Nyan_cat.ogg'
},
videos: {
bear: 'http://www.w3schools.com/html5/movie.ogg'
},
json: {
jsfiddle: {
url: '/echo/json/',
data: {
json: JSON.encode({ foo: 'bar', bar: 'foo' })
},
method: 'post'
},
test: '/echo/json/'
},
jsonp: {
twitter: 'https://api.twitter.com/1/statuses/user_timeline.json?screen_name=OliverCaldwell'
},
scripts: {
EventEmitter: 'https://raw.github.com/Wolfy87/EventEmitter/master/src/EventEmitter.min.js'
},
stylesheets: {
reset: 'http://meyerweb.com/eric/tools/css/reset/reset.css'
},
onProgress: function(current, outOf, percentage) {
$('output').grab(new Element('li', {
text: current + '/' + outOf + ' (' + percentage.floor() + '%)'
}));
},
onComplete: function(assets, amount, time) {
$('output').grab(new Element('li', {
text: 'Done loading ' + amount + ' assets in ' + (time / 1000) + ' seconds.'
}));
}
});
loader.load();
This tests every aspect of the preloader.
All you need to do is set up your preloader and then call the load() method. The setup involves creating an instance of the class like so.
var preloader = new Preloader();
But you pass an object of options as a parameter. As you can see in the example, these are just strings leading to what you wish to load under the appropriate type. The available types are as follows.
- images
- sounds
- videos
- json
- jsonp
- scripts
- stylesheets
With json and jsonp you can pass an object rather than a string which will be used as the options in the Request.JSON/JSONP call.
Every time something is finished loading the progress event is fired. This passes the following arguments to the listeners.
- The amount of assets loaded currently.
- The full amount of assets that will be loaded.
- The percentage of assets loaded.
When everything is done the complete event is fired. This passes these arguments to the listeners.
- The object of assets, it is like a copy of the options you passed but the URLs are replaced with the elements and text that you requested.
- The amount of assets loaded, the same number that is passed as the second argument to the progress event.
- The amount of milliseconds that have elapsed since the loading began.
This class was written by Oliver Caldwell.
thanx very match for the preloader!
but a found the bug
https://developer.mozilla.org/en-US/docs/Configuring_servers_for_Ogg_media
for ff and ogg audio
need modify audio preloder like this:
maybe for ogv too
but i'm didn't test yet