index.html

<!doctype html>
<html lang="ja">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width">
		<meta name="keywords" content="">
		<meta name="description" content="">
		<title>jquery.imgpreloader.js</title>
		<style>
			img { width: 102px; height: 102px; }
			pre { border: 1px solid #000; padding: 10px; }
			#loader{ width: 50px; height: 50px; background-image: url(./img/loader/loader.png); }
			.per-0{ background-position: 0 0; }
			.per-10{ background-position: 0 -50px; }
			.per-20{ background-position: 0 -100px; }
			.per-30{ background-position: 0 -150px; }
			.per-40{ background-position: 0 -200px; }
			.per-50{ background-position: 0 -250px; }
			.per-60{ background-position: 0 -300px; }
			.per-70{ background-position: 0 -350px; }
			.per-80{ background-position: 0 -400px; }
			.per-90{ background-position: 0 -450px; }
			.per-100{ background-position: 0 -500px; }
		</style>
	</head>
	<body>
		<div class="area-body">
			<h1>jquery.imgpreloader.js</h1>
			<p>jquery.imgpreloader.js is a simple image preloader plugin.</p>
			<p>$.imgpreloader returns jQuery deferred object.</p>
			<section>
				<h1>deferred.done()</h1>
				<div id="output1"></div>
				<button id="button1">Start loading</button>
<pre>$.imgpreloader({
	paths: [ './img/example1/1.jpg' ]
}).done(function($allImages){
	alert('Loaded!');
	$output.append($allImages);
});</pre>
			</section>
			<section>
				<h1>deferred.fail()</h1>
				<div id="output2"></div>
				<button id="button2">Start loading</button>
<pre>$.imgpreloader({
	paths: [ './img/example2/notexist.jpg' ]
}).fail(function($allImages, $properImages, $brokenImages){
	alert('Not loaded!');
});</pre>
			</section>
			<section>
				<h1>deferred.always()</h1>
				<div id="output3"></div>
				<button id="button3">Start loading</button>
<pre>$.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);
});</pre>
			</section>
			<section>
				<h1>deferred.progress()</h1>
				<section>
					<h1>progress text</h1>
					<div id="output4">0</div>
					<button id="button4">Start loading</button>
<pre>$.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);
});</pre>
				</section>
				<section>
					<h1>progress bar using css sprites</h1>
					<div id="output5">
						<div id="loader" class="per-0"></div>
					</div>
					<button id="button5">Start loading</button>
<pre>$.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);
});</pre>
				</section>
			</section>
		</div>
		<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
		<script>window.jQuery || document.write('<script src="./js/jquery-1.8.3.min.js"><\/script>')</script>
		<script src="./js/jquery.imgpreloader.js"></script>
		<script>
			$(function(){

				// Example 1
				(function(){
					var $output = $('#output1');
					var $button = $('#button1');
					var startloading = function(){
						$button.attr('disabled', true);
						$.imgpreloader({
							paths: [ './img/example1/1.jpg' ]
						}).done(function($allImages){
							alert('Loaded!');
							$output.append($allImages);
						});
					};
					$button.on('click', startloading);
				}());

				// Example 2
				(function(){
					var $output = $('#output2');
					var $button = $('#button2');
					var startloading = function(){
						$button.attr('disabled', true);
						$.imgpreloader({
							paths: [ './img/example2/notexist.jpg' ]
						}).fail(function($allImages, $properImages, $brokenImages){
							alert('Not loaded!');
						});
					};
					$button.on('click', startloading);
				}());

				// Example 3
				(function(){
					var $output = $('#output3');
					var $button = $('#button3');
					var startloading = function(){
						$button.attr('disabled', true);
						$.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);
						});
					};
					$button.on('click', startloading);
				}());

				// Example 4
				(function(){
					var $output = $('#output4');
					var $button = $('#button4');
					var startloading = function(){
						$button.attr('disabled', true);
						$.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);
						});
					};
					$button.on('click', startloading);
				}());

				// Example 5
				(function(){
					var $output = $('#output5');
					var $button = $('#button5');
					var $loader = $('#loader');
					var startloading = function(){
						$button.attr('disabled', true);
						$.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);
						});
					};
					$button.on('click', startloading);
				}());

			});
		</script>
	</body>
</html>