Simple image preloader uses jQuery and Piecon

jquery.preload.piecon.js

/* piecon */
(function(){var i={},j=null,k=null,f=null,g=null,h={},l={color:"#ff0084",background:"#bbb",shadow:"#fff",fallback:!1},c,o=navigator.userAgent.toLowerCase();c=function(e){return-1!==o.indexOf(e)};var p=c("msie");c("chrome");c("chrome")||c("safari");var q=c("safari")&&!c("chrome");c("mozilla")&&!c("chrome")&&c("safari");var m=function(e){for(var a=document.getElementsByTagName("link"),c=document.getElementsByTagName("head")[0],f=0,h=a.length;f<h;f++)("icon"===a[f].getAttribute("rel")||"shortcut icon"===
a[f].getAttribute("rel"))&&c.removeChild(a[f]);a=document.createElement("link");a.type="image/x-icon";a.rel="icon";a.href=e;document.getElementsByTagName("head")[0].appendChild(a)},n=function(){g||(g=document.createElement("canvas"),g.width=16,g.height=16);return g};i.setOptions=function(e){h={};for(var a in l)h[a]=e.hasOwnProperty(a)?e[a]:l[a];return this};i.setProgress=function(e){f||(f=document.title);if(!k||!j){var a;a:{a=document.getElementsByTagName("link");for(var c=0,i=a.length;c<i;c++)if("icon"===
a[c].getAttribute("rel")||"shortcut icon"===a[c].getAttribute("rel")){a=a[c];break a}a=!1}k=j=a?a.getAttribute("href"):"/favicon.ico"}if(!isNaN(parseFloat(e))&&isFinite(e))if(!n().getContext||p||q||!0==h.fallback)document.title=0<e?"("+e+"%) "+f:f;else{"force"===h.fallback&&(document.title=0<e?"("+e+"%) "+f:f);var g=e,b=n(),d=b.getContext("2d"),g=g||0,e=j;a=new Image;a.onload=function(){if(d){d.clearRect(0,0,16,16);d.beginPath();d.moveTo(b.width/2,b.height/2);d.arc(b.width/2,b.height/2,Math.min(b.width/
2,b.height/2),0,Math.PI*2,false);d.fillStyle=h.shadow;d.fill();d.beginPath();d.moveTo(b.width/2,b.height/2);d.arc(b.width/2,b.height/2,Math.min(b.width/2,b.height/2)-2,0,Math.PI*2,false);d.fillStyle=h.background;d.fill();if(g>0){d.beginPath();d.moveTo(b.width/2,b.height/2);d.arc(b.width/2,b.height/2,Math.min(b.width/2,b.height/2)-2,-0.5*Math.PI,(-0.5+2*g/100)*Math.PI,false);d.lineTo(b.width/2,b.height/2);d.fillStyle=h.color;d.fill()}m(b.toDataURL())}};e.match(/^data/)||(a.crossOrigin="anonymous");
a.src=e}else return!1};i.reset=function(){f&&(document.title=f);k&&(j=k,m(j))};i.setOptions(l);window.Piecon=i})();
/* preloader */
(function($) {
  
  $.fn.preload = function(forPreload, options) {
        
        var settings = $.extend({
			debug : false,
			percentage : {
				textCnt : '',
				lineCnt : ''
			},
			piecon: {
				enable: true,
				options:{
				  color: '#ff0084', // Pie chart color
				  background: '#bbb', // Empty pie chart color
				  shadow: '#fff', // Outer ring color
				  fallback: 'force' // Toggles displaying percentage in the title bar (possible values - true, false, 'force')
				}
			},
			onBuild: $.noop,
			onComplete : $.noop
        }, options);
 
        var items = new Array(),
        	errors = new Array(),
        	success = new Array(),
        	current = 0,
        	root = this,
        	// all methods
        	methods = {
        		run : function() {
        			settings.onBuild();
					if (settings.piecon.enable) {
						Piecon.setOptions(settings.piecon.options)
					}
        			// if no items, please exit..
        			if (!forPreload || forPreload.length == 0)
        				return methods.loadComplete();
        			items = forPreload;
        			// go
        			for (var i = 0; i < items.length; i++) {
						methods.loadImg(items[i]);
					}
 
        		},
        		loadImg : function(url) {
        			// loading...
					var imgLoad = new Image();
					$(imgLoad)
						.load(function() {
							success.push($(this).attr('src'))
							methods.completeLoading();
						})
						.error(function() {
							errors.push($(this).attr('src'));
							methods.completeLoading();
						})
					.attr('src', url);
				},
				completeLoading : function() {
					current++;
					// get current percentage
					var percent = Math.round((current / items.length) * 100);
					// update percents
					methods.updatePercents(percent);					
					// stop or continue
					if(current >= items.length) {
						current = items.length;
						if (settings.debug) {
							methods.debug();
						}
						methods.loadComplete();
					}
				},
				loadComplete: function() {
					methods.updatePercents(100, settings.onComplete.call(root))
					if (settings.piecon.enable) {
						Piecon.reset();
					}
				},
				updatePercents: function(percent, callback) {
					if (settings.piecon.enable) {
						Piecon.setProgress(percent);
					}
					$(settings.percentage.lineCnt)
						.stop()
						.animate(
							{ 
								width: percent + '%'
							},
							300,
							function() { 
								if (callback) callback()
							}
						);
					$(settings.percentage.textCnt).text(percent+"%");
				},
				debug: function() {
					if (!$.browser.msie) {
						console.log('Preloader Debugger\n==================');
						// success
						console.groupCollapsed('Successful load',success.length,'images')
							if (success.length==0) {
								console.log('Global fail... =(');
							} else {
								$.each(success, function(i,v) {
									console.log(v)
								})
							}
						console.groupEnd();
						// errors
						console.group('Error load',errors.length,'images')
							if (errors.length==0) {
								console.log('No errors');
							} else {
								$.each(errors, function(i,v) {
									console.log(v)
								})
							}
						console.groupEnd();
					}
				}
	        }
 
		methods.run();
 
        return this;
    };
 
})(jQuery);

jquery.preload.piecon.min.js

(function(e){e.fn.preload=function(t,n){var r=e.extend({debug:false,percentage:{textCnt:"",lineCnt:""},piecon:{enable:true,options:{color:"#ff0084",background:"#bbb",shadow:"#fff",fallback:"force"}},onBuild:e.noop,onComplete:e.noop},n);var i=new Array,s=new Array,o=new Array,u=0,a=this,f={run:function(){r.onBuild();if(r.piecon.enable){Piecon.setOptions(r.piecon.options)}if(!t||t.length==0)return f.loadComplete();i=t;for(var e=0;e<i.length;e++){f.loadImg(i[e])}},loadImg:function(t){var n=new Image;e(n).load(function(){o.push(e(this).attr("src"));f.completeLoading()}).error(function(){s.push(e(this).attr("src"));f.completeLoading()}).attr("src",t)},completeLoading:function(){u++;var e=Math.round(u/i.length*100);f.updatePercents(e);if(u>=i.length){u=i.length;if(r.debug){f.debug()}f.loadComplete()}},loadComplete:function(){f.updatePercents(100,r.onComplete.call(a));if(r.piecon.enable){Piecon.reset()}},updatePercents:function(t,n){if(r.piecon.enable){Piecon.setProgress(t)}e(r.percentage.lineCnt).stop().animate({width:t+"%"},300,function(){if(n)n()});e(r.percentage.textCnt).text(t+"%")},debug:function(){if(!e.browser.msie){console.log("Preloader Debugger\n==================");console.groupCollapsed("Successful load",o.length,"images");if(o.length==0){console.log("Global fail... =(")}else{e.each(o,function(e,t){console.log(t)})}console.groupEnd();console.group("Error load",s.length,"images");if(s.length==0){console.log("No errors")}else{e.each(s,function(e,t){console.log(t)})}console.groupEnd()}}};f.run();return this}})(jQuery)