jquery.imagesloaded.js

// $('img.photo',this).imagesLoaded(myFunction)
// execute a callback when all images have loaded.
// needed because .load() doesn't work on cached images

// Modified with a two-pass approach to changing image
// src. First, the proxy imagedata is set, which leads
// to the first callback being triggered, which resets
// imagedata to the original src, which fires the final,
// user defined callback.

// modified by yiannis chatzikonstantinou.

// original:
// mit license. paul irish. 2010.
// webkit fix from Oren Solomianik. thx!

// callback function is passed the last image to load
//   as an argument, and the collection as `this`

(function($){

	var supportsNatural = ('naturalWidth' in (new Image()));

	var _uf_log = function(object)
	{
		var args = Array.prototype.slice.call(arguments, 0) || [];

//		throw new Error(args.toString());

		if (typeof console != "undefined")
		{
			return console.log(args);

			//return console.log.apply(console, args);
		}
	};

	(function(_old){

		$.fn.ready = function (handler)
		{
			if (this.is('img'))
			{
				var _elem = this;

				if (typeof handler === 'undefined')
				{
					_elem = _elem.not(':data(dom-ready=true)');
				}

				_elem
					.one('ready', function(){
						$(this).data('dom-ready', true);
					})
					.one('ready', handler)
					/*
					.on('ready', function(event){
						var _this = $(this);

						_uf_log(9, event.name || event.type, event, this, _this.data('dom-ready'), _this.width(), _this.height(), this.naturalWidth, this.naturalHeight);
					})
					*/
					.each(function(){
						var _this = $(this);

						if (_this.isReady())
						{
//							_this.triggerHandler('ready');
							_this.trigger('ready');
						}
						else
						{
							var interval;

							var _fn_readystatechange = function(event){
								var _this = $(this);

//								_uf_log('_fn_readystatechange', event, interval, _this, _this.isReady(), _this.data('dom-ready'));

								if (_this.isReady())
								{
									clearInterval(interval);
									_fn2 = function(){};
//									delete _fn2;
//									delete interval;

									_this
										.off('readystatechange', _fn_readystatechange)
//										.triggerHandler('ready')
										.trigger('ready')
									;
								}
							};

							var _fn2 = function(event){
//								_uf_log('setInterval', event, interval, _this, _this.isReady(), _this.data('dom-ready'));

								if (_this.isReady())
								{
									clearInterval(interval);
									_fn2 = function(){};

									_fn_readystatechange.call(_this[0], event);
								}
							};

//							var interval = setInterval(_fn2, 100);

							_this
								.off('readystatechange', _fn_readystatechange)
								.on('readystatechange', _fn_readystatechange)
								.one('load error', function(){
//									$(this).triggerHandler('ready');
									$(this).trigger('ready');
								})
							;

							clearInterval(interval);

							interval = setInterval(_fn2, 100);
						}
					})
				;

				return this;
			}

			return _old.call(this, handler);
		};

	})($.fn.ready);

	$.fn.isReady = function()
	{
		var _this = $(this);

		var _ret = false;

//		console.log('isReady');

		_this.each(function()
		{
			if (this.complete || this.readyState === 4 || this.readyState == 'complete' || this.readyState == 'loaded')
			{
				_ret = true;
			}
			else if (supportsNatural && this.naturalWidth && this.naturalHeight)
			{
				_ret = true;
			}
			else if (_this.data('dom-ready'))
			{
				_ret = true;
			}

	//		console.log(['isReady', this, _ret]);

			return _ret;
		});

//		console.log(['isReady', _this, _ret]);

		return _ret;
	};

	var _fn_readystatechange = function(){
		var _this = $(this);

		if (_this.isReady())
		{
			_this
				.off('readystatechange.ready', _fn_readystatechange)
				.triggerHandler('ready')
				.trigger('ready')
			;
		}
	};

	$.fn.imagesLoaded = function(callback)
	{
//		console.log('imagesLoaded');

		var _elem = $(this);

//		console.log(_elem);

		_elem
			.on('imagesLoaded.done', callback)
			.each(function(){
//				console.log(this);

				var _this = $(this);

//				console.log([7, _this, _this.isReady()]);

				if (0 && _this.isReady())
				{
					_this.triggerHandler('imagesLoaded.done');
				}
				else if (_this.is('img'))
				{
					_this
						.one('ready', function(){
//							$(this).triggerHandler('imagesLoaded.done');
							$(this).trigger('imagesLoaded.done');
						})
						.ready()
					;
				}
				else if (0)
				{
					var _fn = function(event){
//						console.log([8, event]);

						_fn = function(){};

						$(this).triggerHandler('imagesLoaded.done');

//						console.log([8, event, 1]);
					};

					_this.one('ready load error', function(event){
						_fn.call(this, event);
					});
				}
			})
		;

		return _elem;
	};

	return;

_imagesLoaded = function(callback)
{
	var elems = this.find('img'),
		elems_src = [],
		self = this,
		len = elems.length;

	self.on('imagesLoaded.done', callback);

	if (!elems.length)
	{
//		callback.call(this);

		self.triggerHandler('imagesLoaded.done');

		return this;
	}

	elems.one('load error', function()
	{
		if (--len === 0)
		{
			// Rinse and repeat.
			len = elems.length;
			elems.one('load error', function()
			{
				if (--len === 0)
				{
//					callback.call(self);

					self.triggerHandler('imagesLoaded.done');
				}
			}).each(function()
			{
				this.src = elems_src.shift();
			});
		}
	}).each(function()
	{
		elems_src.push(this.src);
		// webkit hack from http://groups.google.com/group/jquery-dev/browse_thread/thread/eee6ab7b2da50e1f
		// data uri bypasses webkit log warning (thx doug jones)
		this.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";
	});

	return this;
};

})(jQuery);