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;

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

Thanks in advance

6 Years
Discussion Span
Last Post by Airshow


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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
<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;

//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://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.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');
		b.value = b.innerHTML = 'Thumbnail_' + i;
		b.onclick = imgClick_closure(i);


<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>

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.


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.