jquery.imgpreloader.js

jquery.imgpreloader.js is a simple image preloader plugin.

$.imgpreloader returns jQuery deferred object.

deferred.done()

$.imgpreloader({
	paths: [ './img/example1/1.jpg' ]
}).done(function($allImages){
	alert('Loaded!');
	$output.append($allImages);
});

deferred.fail()

$.imgpreloader({
	paths: [ './img/example2/notexist.jpg' ]
}).fail(function($allImages, $properImages, $brokenImages){
	alert('Not loaded!');
});

deferred.always()

$.imgpreloader({
	paths: [
		'./img/example3/notexist1.jpg',
		'./img/example3/notexist2.jpg',
		'./img/example3/notexist3.jpg',
		'./img/example3/notexist4.jpg',
		'./img/example3/notexist5.jpg',
		'./img/example3/notexist6.jpg',
		'./img/example3/notexist7.jpg',
		'./img/example3/notexist8.jpg',
		'./img/example3/notexist9.jpg',
		'./img/example3/notexist10.jpg',
		'./img/example3/11.jpg',
		'./img/example3/12.jpg',
		'./img/example3/13.jpg',
		'./img/example3/14.jpg',
		'./img/example3/15.jpg',
		'./img/example3/16.jpg',
		'./img/example3/17.jpg',
		'./img/example3/18.jpg',
		'./img/example3/19.jpg',
		'./img/example3/20.jpg'
	]
}).always(function($allImages, $properImages, $brokenImages){
	alert('Append only properly loaded images');
	$output.append($properImages);
});

deferred.progress()

progress text

0
$.imgpreloader({
	paths: [
		'./img/example4/1.jpg',
		'./img/example4/2.jpg',
		'./img/example4/3.jpg',
		'./img/example4/4.jpg',
		'./img/example4/5.jpg',
		'./img/example4/6.jpg',
		'./img/example4/7.jpg',
		'./img/example4/8.jpg',
		'./img/example4/9.jpg',
		'./img/example4/10.jpg',
		'./img/example4/11.jpg',
		'./img/example4/12.jpg',
		'./img/example4/13.jpg',
		'./img/example4/14.jpg',
		'./img/example4/15.jpg',
		'./img/example4/16.jpg',
		'./img/example4/17.jpg',
		'./img/example4/18.jpg',
		'./img/example4/19.jpg',
		'./img/example4/20.jpg'
	]
}).done(function($allImages){
	alert('Loaded!');
	$output.empty().append($allImages);
}).progress(function($image, $allImages, $properImages, $brokenImages, isBroken, percentage){
	$output.text(percentage);
});

progress bar using css sprites

$.imgpreloader({
	paths: [
		'./img/example5/1.jpg',
		'./img/example5/2.jpg',
		'./img/example5/3.jpg',
		'./img/example5/4.jpg',
		'./img/example5/5.jpg',
		'./img/example5/6.jpg',
		'./img/example5/7.jpg',
		'./img/example5/8.jpg',
		'./img/example5/9.jpg',
		'./img/example5/10.jpg',
		'./img/example5/11.jpg',
		'./img/example5/12.jpg',
		'./img/example5/13.jpg',
		'./img/example5/14.jpg',
		'./img/example5/15.jpg',
		'./img/example5/16.jpg',
		'./img/example5/17.jpg',
		'./img/example5/18.jpg',
		'./img/example5/19.jpg',
		'./img/example5/20.jpg'
	]
}).done(function($allImages){
	alert('Loaded!');
	$output.empty().append($allImages);
}).progress(function($image, $allImages, $properImages, $brokenImages, isBroken, percentage){
	$loader.removeClass(function(index, css){
		return (css.match(/per-\S+/g) || []).join(' ');
	}).addClass('per-' + Math.floor(percentage / 10) * 10);
});