Need pre-loading images icon

**Zaggs** · Mar 22, 2011 05:39

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?

**AllanP** · Mar 22, 2011 22:59

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.

Code :

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

User Tag List

Thread: Need pre-loading images icon

Thread Tools

Display

Need pre-loading images icon

Bookmarks

Bookmarks

Posting Permissions