Aladdin's lamp is your asynchronous and ligthweight asset manager pal.
You request images (requests are queued) and then rub the lamp (downloads start). When all downloads in the queue are completed, your vows are fulfilled and you get notified:
var lamp = new Aladdin.Lamp();
lamp.request('/img/genius-memories.png');
lamp.rub();
lamp.on('fulfilled', function() { console.log('remembering'); });
With several assets:
var sizes = ['/img/s.png', '/img/m.png', '/img/l.png', '/img/xl.png'];
lamp.request(sizes);
lamp.request('/img/xs.png');// this one too
lamp.rub();
lamp.on('fulfilled', function() { console.log('all sizes downloaded'); });
You may also organize assets into bundles and chain lamp calls:
var splashScreenAssets = ['/img/bg.jpg', '/img/loading.gif'],
introAssets = ['img/logo.png', 'img/trees.png', 'img/houses.png'];
lamp
.request(splashScreenAssets, 'splash-screen')
.request(introAssets, 'intro');
.on('fulfilled:splash-screen', function() {
// display splash screen here...
// and launch subsequent downloads
this.rub('intro');
})
.on('fulfilled:intro', function() {
// display intro here...
})
.rub('splash-screen');// downloads start
What matters here is the bundle names you pass to the request and rub methods.
Finally, when an asset has been downloaded you can access it or remove it using its URI:
var logo = lamp.get('/img/logo.png');// returns a Javascript Image instance
lamp.remove('/img/useless.png');// deletes it from the lamp's cache
Aladdin relies either on underscore or lodash.
Once the sources has been downloaded link to them:
<script src="/path/to/js/underscore.js"></script>
<script src="/path/to/js/aladdin.js"></script>
- support Audio objects
- write tests
Aladdin's lamp is inspired by this html5rocks tutorial, enhanced in particular with asset bundles and events, plus semantic choices! Stoyan Stefanov's JavaScript Patterns book has also guided this implementation.
MIT