Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Jan 2006
    Location
    California
    Posts
    26
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Image preloading scripts... Really work?

    Do image preloading scripts really work? My site has lots of advertisments so i'd like to preload my images, make it run slightly faster if possible...

    Anyone know of a good one?

    TIA!


  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,505
    Thanks
    3
    Thanked 501 Times in 488 Posts
    preloading images does work but can slow loading as preloading takes time

    normally used for preloading mouse over images

    this allows the page to load with small std image in as src of all images

    then as large image loads swaps the image

    uses both the image on load event and .complete
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    
    <head>
      <title></title>
    <script language="JavaScript" type="text/javascript">
    <!--
    // Image PreLoad
    // by Vic Phillips http://www.vicsjavascripts.org.uk
    
    
    var zxcDelay=100;
    var zxcDefaultImg='http://www.vicsjavascripts.org.uk/StdImages/Blank.gif';
    
    var zxcImgAry=[];
    var zxcLoadCk='Start';
    
    function zxcPreLoadBatch(){
     var zxcarg=zxcPreLoadBatch.arguments;
     for (var zxc0=0;zxc0<zxcarg.length;zxc0+=2){
      zxcPreLoad(zxcarg[zxc0],zxcarg[zxc0+1]);
     }
    }
    
    function zxcPreLoad(zxcobj,zxcimg){
     var zxcarg=zxcPreLoad.arguments;
     if (!zxcobj){ zxcobj=new Object; }
     if (typeof(zxcobj)=='string'){ zxcobj=document.getElementById(zxcobj); }
     if (zxcDefaultImg&&zxcobj.tagName){ zxcobj.src=zxcDefaultImg; }
     zxcobj.img=new Image();
     zxcobj.img.obj=zxcobj;
     zxcobj.img.onload=function(){ zxcImgAry.push(this); if (zxcLoadCk=='Start'){ zxcCkLoad(); } }
     zxcobj.img.src=zxcimg;
    }
    
    function zxcCkLoad(){
     zxcLoadCk=false;
     for (var zxc0=0;zxc0<zxcImgAry.length;zxc0++){
      if (zxcImgAry[zxc0].complete&&!zxcImgAry[zxc0].set){
       zxcImgAry[zxc0].set=true;
       if (zxcImgAry[zxc0].obj.tagName){
        if (zxcImgAry[zxc0].obj.tagName=='IMG'){
         zxcImgAry[zxc0].obj.src=zxcImgAry[zxc0].src;
         zxcImgAry[zxc0].obj.width=zxcImgAry[zxc0].width;
         zxcImgAry[zxc0].obj.height=zxcImgAry[zxc0].height;
        }
       }
      }
      else if (!zxcImgAry[zxc0].set){ zxcLoadCk=true; }
     }
     if (zxcImgAry.length<1||zxcLoadCk){ setTimeout('zxcCkLoad();',zxcDelay); }
     else { zxcImgAry=[]; zxcLoadCk='Start'; }
    }
    
    
    //-->
    </script>
    </head>
    
    <body onload="zxcPreLoadBatch(null,'http://www.vicsjavascripts.org.uk/StdImages/One.gif','fred','http://www.vicsjavascripts.org.uk/StdImages/Two.gif','fred1','http://www.vicsjavascripts.org.uk/StdImages/Three.gif');">
    <div style="position:relative;height:200px;" >
    Loading Image
    <img id="fred" src="http://www.vicsjavascripts.org.uk/StdImages/Blank.gif"  style="position:absolute;left:0px;top:0px;">
    </div>
    <div style="position:relative;height:200px;" >
    Loading Image
    <img id="fred1" src="http://www.vicsjavascripts.org.uk/StdImages/Blank.gif"  style="position:absolute;left:0px;top:0px;">
    </div>
    <div style="position:relative;height:200px;" >
    Loading Image
    <img id="fred3" src="http://www.vicsjavascripts.org.uk/StdImages/Blank.gif"  style="position:absolute;left:0px;top:0px;">
    </div>
    
    <input type="button" name="" value="Load last Image" onclick="zxcPreLoad('fred3','http://www.vicsjavascripts.org.uk/StdImages/Four.gif');">
    <input type="button" name="" value="Swap Image" onclick="zxcPreLoad('fred','http://www.vicsjavascripts.org.uk/StdImages/Four.gif');">
    </body>
    
    </html>


  •  

    Posting Permissions

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