JQUERY IMAGE LOAD

Found a tutorial about image loading using Jquery written by Remy Sharp while trying to create the same function for company i am working at. Remy has publish the core script and here i will modify it to make it work for multiple images, and load in sequencing order.

Multiple Image Loading

First we create an HTML page which has list element with class “loading” which we’re going to define later in the CSS, the amount of the list element depend on how many images we need to put here, in this example i have 3 images.
Follow up the comments from my previous post about animate loading image with jquery which asking about how to populate images from the DOM instead of declare the image within the javascript codes manualy, so i made a little changes into the code since it seems to be easier for you all to adopt this into your website.

 Enjoyed this post? Subscribe to our RSS feeds!

<ul id="container">
  <li><img src="your_image_url.jpg"></li>
  <li><img src="your_image_url.jpg"></li>
  <li><img src="your_image_url.jpg"></li>
  <li><img src="your_image_url.jpg"></li>
</ul>

The css

ul li {
	width:112px;
    height:112px;
    list-style:none;
}
ul li.loading {
	background: url(spinner.gif) no-repeat center center;
}
#loadnote {
	position:absolute;
    top:0px;
    left:0px;
    background:red;
    padding:10px 15px;
    color:white;
}

The Javascript

$(function () {
	//@ my flicker link
	var flickr_set = 'http://www.flickr.com/photos/87187920@N00/';
	//@ id of div where the loading informations visible
	var _loadDivId = 'loadnote';
	//@ id of the ul container
	var _imgContainerId = 'container';
	//@ style of li loading (spinner image)
	var _imageLoadClassName = 'loading';
	//@ grab the images
	var images = $('ul#'+_imgContainerId+' li img');
	//@ image length
	var max = images.length;
	//@ remove them from DOM to prevent normal load
	$('ul#'+_imgContainerId+' li').remove();
	//@ loading div object
	var loadDiv = null;
	//@ start loading
	if(max>0){
		loadDiv = $('<div id="'+_loadDivId+'" style="display:none"></div>').appendTo($('body'));
		LoadImage(0,max);
	}
	//@ Loading Function Handler
	function LoadImage(index,max)
	{
		if(index<max)
		{
			// loading div update
			$('#'+_loadDivId).html("Loading "+(index+1)+" of "+max).fadeIn("fast");
			// add list to ul
			var list = $('<li id="_img'+index+'"></li>').attr('class',_imageLoadClassName).appendTo('ul#'+_imgContainerId);
			// new image object
			var img = new Image();
			// current image
			var curr = $("li#_img"+index);
			// load current image
			$(img).load(function ()
			{
				//@ hide it first + .hide() failed in safari
				$(this).css('display','none');
				//@ remove loading class from li and insert the image into it
				$(curr).removeClass(_imageLoadClassName).append(this);
				//@ optional wrap with link
				$(this).wrap('<a href="'+flickr_set+'"></a>');
				//@ fade it in
				$(this).fadeIn('slow',function()
				{
					if(index == (max-1))
						{
							//@ remove loading div after all images loaded
							$(loadDiv).remove();
						}
					else
						{
						  //@ we are inform loading next item
						  $(loadDiv).html('Wait Loading Next Item ...');
						  //@ delay 2 secons and load next item *uses jquery timer plugin*
						  $(this).oneTime("2s", function() { LoadImage(index+1,max); });
						}
				});
			}).error(function () {
				//@ if loading error remove li
				$(curr).remove();
				//@ try to load next item
				LoadImage(index+1,max);
			}).attr('src', $(images[index]).attr('src'));
		}
	}
});

Please change Flickr account to reflect your own Flickr Account

Dependencies

• Jquery Javascript Library
• Jquery Timer Plugin