imagesq.js

/*
	imagesQueue.js FULL SOURCE
	A simple, cross-browser, *parallel* images loader object.
	
	imagesQ={
			onComplete: function(){} // Fires when all finished loading
			,onLoaded: function(){} // Fires when an image finishes loading
			,current: null // Last loaded image (Image Object)
			,qLength : 0 // the queue length before process_queue
			,images: [] // Loaded images (array of Image Object)
			,inProcess : false // a flag to indicate if in process_queue
			,queue:[] // Waiting to be processed (array of strings (urls for Image SRC))
			,queue_images: function(){ // gets multiple arguments each can be either an image src or an array of image src (you can mix).
				var arg=arguments;
				for (var i=0;i<arg.length;i++){
					if (arg[i].constructor === Array){
						this.queue= this.queue.concat(arg[i]); // add to queue, do not empty it!
					}else if(typeof arg[i]==='string'){
						this.queue.push(arg[i]);
					}
				}				
			}
			,process_queue: function() { // start loading images from the queue
				this.inProcess = true;
				this.qLength += this.queue.length;
				while(this.queue.length >0){
					this.load_image(this.queue.shift()); //pull the next image off the top and load it
				}
				this.inProcess = false;
			}
			,load_image: function(imageSrc){ // load a single by a url and continue to process the queue
				var th = this;
				var im = new Image;
				im .onload = function(){ // After user agent has the image
					th.current = im ; // set the current
					th.images.push(im ); // add the image to the stack
					(th.onLoaded)(); //fire the onloaded
					if(th.queue.length > 0 && !th.inProcess){
						th.process_queue(); // make sure other items are loaded!
					}
					if(th.qLength == th.images.length){ // all images loaded?
						(th.onComplete)(); // call callback
					}//else{// if queue is not empty 
					 //	
					// }
				}
				im .src = imageSrc; // Tell the User Agent to GET the image
			}
		}
*/
	  
// Packed Source
imagesQ={onComplete:function(){},onLoaded:function(){},current:null,qLength:0,images:[],inProcess:false,queue:[],queue_images:function(){var arg=arguments;for(var i=0;i<arg.length;i++){if(arg[i].constructor===Array){this.queue=this.queue.concat(arg[i])}else if(typeof arg[i]==='string'){this.queue.push(arg[i])}}},process_queue:function(){this.inProcess=true;this.qLength+=this.queue.length;while(this.queue.length>0){this.load_image(this.queue.shift())}this.inProcess=false},load_image:function(imageSrc){var th=this;var im=new Image;im.onload=function(){th.current=im;th.images.push(im);(th.onLoaded)();if(th.queue.length>0&&!th.inProcess){th.process_queue()}if(th.qLength==th.images.length){(th.onComplete)()}};im.src=imageSrc}}

/*
    imagesQueue Usage Example:
*/

// the img element to show
show_img = document.getElementById('show_me');
log_e = document.getElementById('console_log');
log = function(output){log_e.innerHTML +='<br/>'+(output)};
imagesQueue = imagesQ;
// On every image loaded show progress:
imagesQueue.onLoaded = function()
{
	show_img.src = imagesQueue.current.src;
	var output = 'Q1 '+(imagesQueue.images.length)+"/"+(imagesQueue.qLength)+" ("+imagesQueue.current.src+") Loaded (onLoaded)";
	log(output);
}
// When done say so.
imagesQueue.onComplete = function()
{
	QueuesCompleteAll();
}
log('Q1 Queued 10 images (queue_images)');
var now =(new Date).getTime(); // make sure to get non-cached images
imagesQueue.queue_images(['/web/20120314072024/http://labs.lieldulev.com/imagesQueue/images/512K.jpg?time='+now,
						  '/web/20120314072024/http://labs.lieldulev.com/imagesQueue/images/256K.jpg?time='+now,
						   '/web/20120314072024/http://labs.lieldulev.com/imagesQueue/images/128K.jpg?time='+now,
						   '/web/20120314072024/http://labs.lieldulev.com/imagesQueue/images/64K.jpg?time='+now,
							'/web/20120314072024/http://labs.lieldulev.com/imagesQueue/images/32K.jpg?time='+now,
							'/web/20120314072024/http://labs.lieldulev.com/imagesQueue/images/16K.png?time='+now,
							'/web/20120314072024/http://labs.lieldulev.com/imagesQueue/images/8K.jpg?time='+now,
							'/web/20120314072024/http://labs.lieldulev.com/imagesQueue/images/4K.jpg?time='+now,
							'/web/20120314072024/http://labs.lieldulev.com/imagesQueue/images/1K.jpg?time='+now]); 

log('Starting the queue (process_queue)');
var start = (new Date).getTime();
imagesQueue.process_queue();
log('This is the next line in the code after process_queue, to avoid this, you should design create a function for the rest of your code and call it upon onComplete.');
function QueuesCompleteAll(){
	var diff = (new Date).getTime() - start;
	log('All Done ('+diff+'ms)');
}