Hi Guys!
Im looking for a Javascript function that will display a loading icon in place of some large images I have on my website.
On a slow connection the large images take a while to load and I need something in place of those images until they have loaded fully.
Can anyone help me out here?
This script will do it for you. The image is loaded into memory on page load. While this is happening the loader display flashes. When the image is fully loaded it fires a handler which turns off the flashing display and replaces it with the image. The following script has an image shown, but this is only being used here as an illustration.
The flashing loader used here is just a line of text, but it can be replaced with an image without any problems. The div holding the display text is toggled between “visible” and “hidden” visibility states.
[HIGHLIGHT=“”]
<!doctype HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>
<html>
<head>
<meta http-equiv=“Content-Type” content=“text/html; charset=windows-1252”>
<title>Preload Images</title>
<script type=“text/javascript”>
<!–
var Z=new Array(), tOut=null, loaderElem1, currentVis=“visible”; // global
window.onload=function()
{// shortcut to loader display
loaderElem1=document.getElementById(“loader1”);
// start loader display flashing
tOut=setTimeout(flashIt,200);
// pre-load image object into memory
Z[0]=new Image(6144,4096); Z[0].onload=stopLoader; Z[0].src=“vLarge.jpg”;
}
// ------------
// toggles loader1 display while img loading
function flashIt()
{ clearTimeout(tOut);
// set visibility
currentVis=(currentVis==“visible”)? “hidden” : “visible”;
loaderElem1.style.visibility=currentVis;
// recall this function
tOut=setTimeout(flashIt,200);
}
// -----------
// when img loaded cancel process and render image
function stopLoader()
{ clearTimeout(tOut);
currentVis=“hidden”;
// render image
var hElem1=document.getElementById(“holder1”);
hElem1.innerHTML=‘<img border=“0” src=“vLarge.jpg” width=“6144” height=“4096”>’;
}
// ---------
//–>
</script>
<style type=“text/css”>
<!–
body { font-family:arial, helvetica, sans-serif; font-weight:normal; font-size:13px; color:#000; text-align:center; margin:3px 0px; }
#wrap { position:relative; top:0px; left:0px; width:900px; height:500px; margin:0px auto; text-align:left; }
#holder1 { position:absolute; top:20px; left:20px; text-align:left; }
#loader1 { position:absolute; visibility:visible; top:0px; left:0px; text-align:left; }
.a18B { font-size:18px; font-weight:bold; color:#000080; }
–>
</style>
</head>
<body>
<div id=“wrap”>
<div id=“holder1”>
<div id=“loader1” class=“a18B”>
Loading</div>
<!-- end loader –>
</div>
<!-- end holder1 –>
</div>
<!-- end wrap –>
</body>
</html>