mootools

References to Documentation

1. Element/Element-Selectors.js#$E
2. Native/Element.js#Element.setStyle
3. Element/Element-Event.js#Element.addEvent
4. Native/Element.js#$$
5. Native/Element.js#Element.remove
6. Remote/Assets.js#images
7. Element/Element-Dimensions.js#Element.getTop
8. Native/Element.js#Element.getStyle
9. Native/String.js#String.toInt
10. Effects/Fx-Style.js#Element.effect
11. Native/Element.js#Element.injectBefore
12. Effects/Fx-Style.js#Fx.Style.start
13. Class/Class-Extras.js#Chain.chain
14. Native/Function.js#Function.delay
15. Native/Element.js#Element.setHTML

var busy = false, timer, loadedImages = [], gallery = $('gallery'), progress = $('progress'), bar = $E('#progress .bar'); 
var path = '/demos/Asset.images/';
var images = [
	path + 'cow1.png',
	path + 'cow2.jpg', 
	path + 'cow3.jpg', 
	path + 'cow4.jpg', 
	path + 'cow5.jpg'
];
gallery.setStyles({'opacity': 0, 'display': 'none'});
progress.setStyle('visibility', 'hidden');
$('clear').setStyle('visibility', 'hidden');
 
$('start').addEvent('click', function(e) {
	e = new Event(e).stop();
	$('start').setStyle('visibility', 'hidden');
	$('clear').setStyle('visibility', 'hidden');
	if (!busy) {
 
		var galleryImgs = $$('#gallery img');
		if (galleryImgs.length > 0) galleryImgs.each(function(image) {	image.remove();	});
 
		busy = true;
		progress.setStyle('visibility', 'visible');
		gallery.setStyle('display', 'block');
		new Asset.images(images, {
			onProgress: function(i) {
				this.setStyles({
					'position': 'absolute',
					'opacity': 0,
					'left': (gallery.getCoordinates().width / 2) - (this.width / 2),
					'top': (gallery.getCoordinates().height / 2) - (this.height / 2)
				});
				loadedImages[i] = this;
				var percent = ((i + 1) * progress.getStyle('width').toInt()) / images.length;
				bar.setStyle('width', percent).setHTML(i + 1 + ' / ' + images.length);
			},
			onComplete: function() {
				progress.setStyle('visibility', 'hidden');
				var fx = $('gallery').effect('opacity').start(1);
				timer = 0;
				loadedImages.each(function(image, i) {
					timer += 1500;
					image.inject(gallery);
					fx = function() {
						var imgEffect = image.effect('opacity', {duration: 1500});
						imgEffect.start(1).chain(function() {
							if (i < loadedImages.length - 1) {
								this.start(0).chain(function() {
									image.remove();
								});
							} else {
								busy = false;
								$('clear').setStyle('visibility', 'visible');
								$('start').setStyle('visibility', 'hidden');
							}
						});
 
					}.delay(timer * 2);
				});
			}
		});
	}
});
 
$('clear').addEvent('click', function(e) {
	e = new Event(e).stop();
	if (!busy) {
		$$('#gallery img').each(function(image) {
			image.remove();
		});
		var fx = new Fx.Style(gallery, 'opacity', {
			onComplete: function() {
				gallery.setStyle('display', 'none');
			}
		});
		fx.start(0);
	}
	$('clear').setStyle('visibility', 'hidden');
	$('start').setStyle('visibility', 'visible');
});
 

<h3>Asset.images</h3>
<p><a href="#" title="Start loading" id="start">start</a><a href="#" id="clear" title="Clear data">clear</a></p>
<p id="log"></p>
<br />
<div id="progress"><div class="bar"></div></div>
<div id="gallery"></div>

#gallery {
	position: relative;
	margin: 10px auto;
	width: 500px;
	height: 400px;
	background: #2a2a2f;
	border: 2px solid #5f5f5f;
}
 
#progress {
	margin: 10px auto;
	width: 200px;
	height: 15px;
	padding: 2px;
	border: 2px solid #dfdfdf;
}
 
#progress .bar {
	width: 0px;
	text-align: center;
	font-size: 10px;
	height: 15px;
	background: #2a2a2f;
	color: #fff;
	font-weight: bold;
}