davestewart/load-images.html

## load-images.html
<!DOCTYPE html>

<html>
<head>
    <title>Image Load</title>
	<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>

<body>


<script>

	// image loading methods
		$.loadImage = function(url, onLoad, onError) {

			function load(deferred)
			{
				function _onLoad() {
					off();
					onLoad && onLoad(image);
					deferred.resolve(image);
				}

				function _onError() {
					off();
					onError && onError(image);
					deferred.reject(image);
				}

				function off() {
					image.onload	= null;
					image.onerror	= null;
					image.onabort	= null;
				}

				var image		= new Image();
				image.onload	= _onLoad;
				image.onerror	= _onError;
				image.onabort	= _onError;
				image.src		= url;
			};

			return $.Deferred(load).promise();
		};

		$.loadImages = function(urls, onDone, onFail, onLoad, onError)
		{
			// convert URLs to promises
				var defers = urls.map( function(url) { return $.loadImage(url, onLoad, onError); });

			// load images
				return ($
					.when.apply(window, defers)
					.done(onDone)
					.fail(onFail));
		}

	// URLs
		var urls =
		[
			'/animation/assets/images/objects/car.png',
			'/animation/assets/images/objects/object-cash.gif',
			'/animation/assets/images/objects/office-screen-10.png',
			'/animation/assets/images/objects/van.png'
		];

	// queue load handlers
		function onDone(){ console.log('loaded all images'); }
		function onFail(){ console.log('failed to load images'); }

	// image load handlers
		function onLoad(image){ console.log('loaded ' + image.src); $('body').append($('<img />').attr('src', image.src))}
		function onError(image){ console.log('could not load ' + image.src); }

	// load images
		$.loadImages(urls, onDone, onFail, onLoad, onError);

</script>
</body>
</html>
	<!DOCTYPE html>

	<html>
	<head>
	<title>Image Load</title>
	<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
	</head>

	<body>


	<script>

	// image loading methods
	$.loadImage = function(url, onLoad, onError) {

	function load(deferred)
	{
	function _onLoad() {
	off();
	onLoad && onLoad(image);
	deferred.resolve(image);
	}

	function _onError() {
	off();
	onError && onError(image);
	deferred.reject(image);
	}

	function off() {
	image.onload = null;
	image.onerror = null;
	image.onabort = null;
	}

	var image = new Image();
	image.onload = _onLoad;
	image.onerror = _onError;
	image.onabort = _onError;
	image.src = url;
	};

	return $.Deferred(load).promise();
	};

	$.loadImages = function(urls, onDone, onFail, onLoad, onError)
	{
	// convert URLs to promises
	var defers = urls.map( function(url) { return $.loadImage(url, onLoad, onError); });

	// load images
	return ($
	.when.apply(window, defers)
	.done(onDone)
	.fail(onFail));
	}

	// URLs
	var urls =
	[
	'/animation/assets/images/objects/car.png',
	'/animation/assets/images/objects/object-cash.gif',
	'/animation/assets/images/objects/office-screen-10.png',
	'/animation/assets/images/objects/van.png'
	];

	// queue load handlers
	function onDone(){ console.log('loaded all images'); }
	function onFail(){ console.log('failed to load images'); }

	// image load handlers
	function onLoad(image){ console.log('loaded ' + image.src); $('body').append($('<img />').attr('src', image.src))}
	function onError(image){ console.log('could not load ' + image.src); }

	// load images
	$.loadImages(urls, onDone, onFail, onLoad, onError);

	</script>
	</body>
	</html>