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
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
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.
