0

Hi friends,

In one of my web page I want to show an image preloader. ie When I clicked on the small thumbnail in my web page then the main large image will load. My code looks something like this

$("#images li").click(function(){
var image=this.href;
$("#mainImage").attr('src',image);
});

I want to show the Loading sign until the main image loads completely. Please help me

Thanks in advance
Rajeesh

2
Contributors
1
Reply
2
Views
7 Years
Discussion Span
Last Post by Airshow
0

Rajeesh,

Here's a little demo using techniques I find reliable.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Airshow :: Untitled</title>
<style type="text/css">
#mainImageWrapper {
	width: 200px;
	height: 200px;
	border: 1px solid #000;
	background-color: #e0e0e0;
	float: left;
}
#mainImage {
	display: none;
	width: 200px;
	height: 200px;
	border: 0;
}
#mainImageWrapper .msg {
	display: none;
	width: 100%;
	margin-top: 90px;
	color: #666;
	font-family: verdana;
	font-size: 9pt;
	text-align: center;
}
#buttonsWrapper {
	margin-right: 12px;
	float: left;
}
#buttonsWrapper button{
	margin-bottom: 4px;
}
</style>

<script>
//Utility function
Array.prototype.find = function(x){
	for(var i=0; i<this.length; i++) { if(this[i] === x) { return i; } }
	return -1;
};

onload = function() {//Everything inside this block is executed after the page has loaded
	//Some images urls, randomly chosen from the web
	images = [
		"http://www.flash-slideshow-maker.com/images/help_clip_image020.jpg",
		"http://www.dynamicdrive.com/dynamicindex4/lightbox2/flower.jpg",
		"http://hirise.lpl.arizona.edu/HiBlog/wp-content/uploads/2009/03/esp_012068_9000.jpg",
		"http://www.nsf.gov/od/lpa/news/02/images/emperors.jpg",
		"http://aaa.bbb.org/xxxxx.gif"//this one doesn't exist, so should give "Error"
	];

	//Object containing references to DOM elements we want to show/hide
	var mainImageElements = {
		image : document.getElementById('mainImage'),
		loading : document.getElementById('mainImageLoading'),
		error : document.getElementById('mainImageError')
	};

	//Utility function to show/hide DOM elements on demand.
	mainImageElements.show = function(elArray) {
		for(prop in this) {
			if(typeof this[prop] !== 'function') {
				this[prop].style.display = (elArray.find(prop) > -1) ? 'block': 'none';
			}
		}
	};

	//When an image sussessfully loads we want to show it (and hide "error" and "loading" messages)
	mainImageElements.image.onload = function() { mainImageElements.show(['image']); };
	
	//When an image fails to load we want to show the error" message (and hide the image element and "loading" message)
	mainImageElements.image.onerror = function() { mainImageElements.show(['error']); };

	//Utility function to support the dynamic creation of buttons to simulate thumbnails
	var imgClick_closure = function(i) {
		return function() {
			//At this point, we want to show the "loading" message (and hide the image element and error" message).
			mainImageElements.show(['loading']);
			mainImageElements.image.src = images[i];
		};
	}
	//Here we create some buttons to simulate thumbnails
	var buttonsWrapper = document.getElementById('buttonsWrapper');
	for(var i=0; i<images.length; i++) {
		var d = document.createElement('div');
		var b = document.createElement('button');
		d.appendChild(b);
		buttonsWrapper.appendChild(d);
		b.value = b.innerHTML = 'Thumbnail_' + i;
		b.onclick = imgClick_closure(i);
	}
};
</script>
</head>

<body>

<div id="buttonsWrapper"></div>
<div id="mainImageWrapper">
	<img id="mainImage" src="" />
	<div class="msg" id="mainImageLoading">Loading ...</div>
	<div class="msg" id="mainImageError">Sorry<br>Image failed to load</div>
</div>
</body>
</html>

There's still some work for you to do. You will need to adapt the html/css to your own layout and to build your thumbnails and attach onclick handlers. The javascript will probably require some adaptation too.

Airshow

Edited by Airshow: n/a

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.