SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Wizard Zaggs's Avatar
    Join Date
    Feb 2005
    Posts
    1,045
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Need pre-loading images icon

    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?

  2. #2
    SitePoint Addict AllanP's Avatar
    Join Date
    Sep 2010
    Location
    Australia
    Posts
    286
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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>


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •