Best way to preload images

A

2

8

What's the best way to preload images? I'm trying to create an image tab that has around 59 png images. Here's the code I have so far:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
  <head>
    <title>Checklist</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="stylesheet" type="text/css" href="/systems_hr/Style%20Library/globalstyles_test.css">
    <style type="text/css">
      #innerframe {
                width: 100%;
                height: 63em;
        }
    </style>
    <script type="text/javascript" src="/systems_hr/Style%20Library/JavaScripts/styles.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>    
    <script type="text/javascript">    

      var id1 = new Image();
      id1.src = "images/id1.png";

      var id11 = new Image();
      id11.src = "images/id1-1.png";

      var id12 = new Image();
      id12.src = "images/id1-2.png";

      var id13 = new Image();
      id13.src = "images/id1-3.png";  

      var id2 = new Image();
      id2.src = "images/id2.png";

      var id21 = new Image();
      id21.src = "images/id2-1.png";

      var id22 = new Image();
      id22.src = "images/id2-2.png";

      var id23 = new Image();
      id23.src = "images/id2-3.png";    

      var id3 = new Image();
      id3.src = "images/id3.png";

      var id31 = new Image();
      id31.src = "images/id3-1.png";

      var id32 = new Image();
      id32.src = "images/id3-2.png";

      var id33 = new Image();
      id33.src = "images/id3-3.png";       

      var id4 = new Image();
      id4.src = "images/id4.png";

      var id41 = new Image();
      id41.src = "images/id4-1.png";

      var id42 = new Image();
      id42.src = "images/id4-2.png";

      var id43 = new Image();
      id43.src = "images/id4-3.png"; 

      var iw1 = new Image();
      iw1.src = "images/iw1.png"

      var iw11 = new Image();
      iw11.src = "images/iw1-1.png"

      var iw12 = new Image();
      iw12.src = "images/iw1-2.png"

      var iw13 = new Image();
      iw13.src = "images/iw1-3.png"

      var iw14 = new Image();
      iw14.src = "images/iw1-4.png"

      var iw2 = new Image();
      iw2.src = "images/iw2.png"

      var iw21 = new Image();
      iw21.src = "images/iw2-1.png"

      var iw22 = new Image();
      iw22.src = "images/iw2-2.png"

      var iw23 = new Image();
      iw23.src = "images/iw2-3.png"

      var iw24 = new Image();
      iw24.src = "images/iw2-4.png"  

            var iw3 = new Image();
      iw3.src = "images/iw3.png"

      var iw31 = new Image();
      iw31.src = "images/iw3-1.png"

      var iw32 = new Image();
      iw32.src = "images/iw3-2.png"

      var iw33 = new Image();
      iw33.src = "images/iw3-3.png"

      var iw34 = new Image();
      iw34.src = "images/iw3-4.png"  

      var iw4 = new Image();
      iw4.src = "images/iw4.png"

      var iw41 = new Image();
      iw41.src = "images/iw4-1.png"

      var iw42 = new Image();
      iw42.src = "images/iw4-2.png"

      var iw43 = new Image();
      iw43.src = "images/iw4-3.png"

      var iw44 = new Image();
      iw44.src = "images/iw4-4.png"      

      var im1 = new Image();
      im1.src = "images/im1.png"

      var im11 = new Image();
      im11.src = "images/im1-1.png"

      var im12 = new Image();
      im12.src = "images/im1-2.png"

      var im13 = new Image();
      im13.src = "images/im1-3.png"

      var im2 = new Image();
      im2.src = "images/im2.png"

      var im21 = new Image();
      im21.src = "images/im2-1.png"

      var im22 = new Image();
      im22.src = "images/im2-2.png"

      var im23 = new Image();
      im23.src = "images/im2-3.png"

      var im3 = new Image();
      im3.src = "images/im3.png"

      var im31 = new Image();
      im31.src = "images/im3-1.png"

      var im32 = new Image();
      im32.src = "images/im3-2.png"

      var im33 = new Image();
      im33.src = "images/im3-3.png"

      function changeFrame (frameSRC)
      {
        var myFrame = document.getElementById('fraContent'); 
        myFrame.contentWindow.location =  frameSRC;
      }

      function rolloverArea(area, orgImgSrc, tgtImgSrc, orgCursor, tgtCursor) // jQuery script for rollover effect
      {
        $("#imgTab").attr("src", orgImgSrc);
        $(area).hover(
          function()
            {
              $("#imgTab").attr("src", tgtImgSrc);
              $("#imgTab").css("cursor",tgtCursor);
            },
          function()
            {
              $("#imgTab").attr("src", orgImgSrc);
              $("#imgTab").css("cursor",orgCursor);
             }
        );
      }

      /*function initLoad ()
      {
      }*/

      function changeImgState(img) // tab interface of Day Week and Month arrows
      {
        var myImgTab = document.getElementById("imgTab");

        switch (img)
        {
          case 'id1':

            myImgTab.src = id1.src;

            // Rollover effect for the image
            rolloverArea("#area1",id1.src,id1.src,"auto","auto");
            rolloverArea("#area2",id1.src,id11.src,"auto","pointer");
            rolloverArea("#area3",id1.src,id12.src,"auto","pointer");
            rolloverArea("#area4",id1.src,id13.src,"auto","pointer");
            rolloverArea("#area5",id1.src,id1.src,"auto","auto");

            // onClick effect
            $("#area2").click(function() {
              $("#innerframe").attr("src","D2.html");
              changeImgState("id2");
              }
             );

             $("#area3").click(function() {
              $("#innerframe").attr("src","D3.html");
              changeImgState("id3");
              }
             );

             $("#area4").click(function() {
              $("#innerframe").attr("src","D4.html");
              changeImgState("id4");
              }
             );

            break;
          case 'id2':

            myImgTab.src = id2.src;

            // Rollover effect for the image
            rolloverArea("#area1",id2.src,id21.src,"auto","pointer");
            rolloverArea("#area2",id2.src,id2.src,"auto","auto");
            rolloverArea("#area3",id2.src,id22.src,"auto","pointer");
            rolloverArea("#area4",id2.src,id23.src,"auto","pointer");
            rolloverArea("#area5",id2.src,id2.src,"auto","auto");

            // onClick effect
            $("#area1").click(function() {
              $("#innerframe").attr("src","D1.html");
              changeImgState("id1");
              }
             );

             $("#area3").click(function() {
              $("#innerframe").attr("src","D3.html");
              changeImgState("id3");
              }
             );

             $("#area4").click(function() {
              $("#innerframe").attr("src","D4.html");
              changeImgState("id4");
              }
             );

            break;

          case 'id3':

            myImgTab.src = id3.src;

            // Rollover effect for the image
            rolloverArea("#area1",id3.src,id31.src,"auto","pointer");
            rolloverArea("#area2",id3.src,id32.src,"auto","pointer");
            rolloverArea("#area3",id3.src,id3.src,"auto","auto");
            rolloverArea("#area4",id3.src,id33.src,"auto","pointer");
            rolloverArea("#area5",id3.src,id3.src,"auto","auto");

            // onClick effect
            $("#area1").click(function() {
              $("#innerframe").attr("src","D1.html");
              changeImgState("id3");
              }
             );

            $("#area2").click(function() {
              $("#innerframe").attr("src","D2.html");
              changeImgState("id2");
              }
             );

             $("#area4").click(function() {
              $("#innerframe").attr("src","D4.html");
              changeImgState("id4");
              }
             );

            break;

          case 'id4':

            myImgTab.src = id4.src;

            // Rollover effect for the image
            rolloverArea("#area1",id4.src,id41.src,"auto","pointer");
            rolloverArea("#area2",id4.src,id42.src,"auto","pointer");
            rolloverArea("#area3",id4.src,id43.src,"auto","pointer");
            rolloverArea("#area4",id4.src,id4.src,"auto","auto");
            rolloverArea("#area5",id4.src,id4.src,"auto","auto");

            // onClick effect
            $("#area1").click(function() {
              $("#innerframe").attr("src","D1.html");
              changeImgState("id3");
              }
             );

            $("#area2").click(function() {
              $("#innerframe").attr("src","D2.html");
              changeImgState("id2");
              }
             );

             $("#area4").click(function() {
              $("#innerframe").attr("src","D4.html");
              changeImgState("id4");
              }
             );

            break;

          case 'iw1':

            myImgTab.src = iw1.src;

            rolloverArea("#area1",iw1.src,iw1.src,"auto","auto");
            rolloverArea("#area2",iw1.src,iw11.src,"auto","pointer");
            rolloverArea("#area3",iw1.src,iw12.src,"auto","pointer");
            rolloverArea("#area4",iw1.src,iw13.src,"auto","pointer");
            rolloverArea("#area5",iw1.src,iw14.src,"auto","pointer");

            break;
          case 'im1': 

            myImgTab.src = im1.src;

            rolloverArea("#area1",im1.src,im1.src,"auto","auto");
            rolloverArea("#area2",im1.src,im11.src,"auto","pointer");
            rolloverArea("#area3",im1.src,im12.src,"auto","pointer");
            rolloverArea("#area4",im1.src,im13.src,"auto","pointer");
            rolloverArea("#area5",im1.src,im1.src,"auto","auto");           
            break;
        }

      } 

      function changeTab(tab)
      {   
        switch(tab)     
        {
          case 'day1':
            var myTab = document.getElementById("day1");

            document.getElementById("week1").className = "active";
            document.getElementById("month1").className = "active";        
            myTab.className = "current"; 

            changeImgState("id1");
            $("#innerframe").attr("src","D1.html");

            break; 
          case 'week1':
            document.getElementById("day1").className = "active";
            document.getElementById("month1").className = "active";         
            document.getElementById("week1").className = "current";

            changeImgState("iw1");
            $("#innerframe").attr("src","W1.html");

            break;
          case 'month1':
            document.getElementById("week1").className = "active";
            document.getElementById("day1").className = "active";         
            document.getElementById("month1").className = "current";

            changeImgState("im1");
            $("#innerframe").attr("src","M1.html");

            break;
        }  

      }

      function test(tab)
      {
        alert(document.getElementById.id + " " + document.getElementById(tab).className)
      }
    </script>

  </head>
  <body onload="changeTab('day1');">
  <table border="0" width="100%">
  <tr>
    <td colspan="2" align="left">
      <div id="navcontainer">
        <ul id="navlist">
          <li><a class="active" id="day1" onclick="changeTab('day1');">FIRST DAY</a></li>
          <li><a class="active" id="week1" onclick="changeTab('week1');">FIRST WEEK</a></li>
          <li><a class="active" id="month1" onclick="changeTab('month1');">FIRST 30-DAYS</a></li>
        </ul>
      </div>
      <div id="page_viewer">
          <table border="0" width="1020px" cellpadding="0" cellspacing="0">
          <tr>
            <td>
              <img src="" style="border: 0px; width: 1000px; height: 72px;" alt="" usemap="#imgTabMap" name="imgTab" id="imgTab">
                <map id="imgTabMap" name="imgTabMap">
                  <area shape="rect" alt="" title="" coords="7,11,166,60" id="area1">
                  <area shape="rect" alt="" title="" coords="206,10,365,59" id="area2">
                  <area shape="rect" alt="" title="" coords="405,11,566,59" id="area3">
                  <area shape="rect" alt="" title="" coords="605,10,763,60" id="area4">
                  <area shape="rect" alt="" title="" coords="805,9,963,60" id="area5">
                  <!-- Created by Online Image Map Editor (http://www.maschek.hu/imagemap/index) -->
                </map>

            </td>
          </tr>
          <tr>
            <td width="100%">
              <iframe name="fraContent" id="innerframe" frameborder="0" scrolling="no" width="1000px"></iframe>
            </td>
          </tr>
          </table>
      </div>
      </td>
    </tr>
  </table>
  </body>
</html>

The thing is now my page takes a while to load, and I can't figure out why clicking on a tab seems to load the iframe slowly. Does loading the src of the iframe cause the images to be preloaded again? Would it be better to load the relevant images onclick instead of having them all load when the page opens?

I also found a good alternative in the form of lieldulev's parallel loading script (imagesQueue) but I don't know how to use it.

BTW, I am not well-versed in JavaScript, so I'm trying to learn as I work. Right now, what I'm doing is implementing techniques that I research and trying to understand their functions, hence the reason why my coding isn't as clean as I'd like it to be, sometimes even just using inefficient "brute force" codes to get the desired effect. I'd like to improve on that, though, and any help would be appreciated.

Regarding the parallel cache script, here's a test page I set up patterned after Nick's demo:

        <html> 
        <head> 
            <title>liel's smij dev page</title> 
            <style type="text/css"> 
                #m1{
                    width:400px;
                    height:300px;
                    background-color:#adf;
                }
                canvas{
                    width:100%;
                    height:100%;
                }
                #show_me{float:left;width:100px;}
                #console_log{font-size:10px;float:right;}
            </style> 
            <script type="text/javascript" src="/systems_hr/Style%20Library/JavaScripts/imagesQueue.js"></script> 
        </head> 
        <body> 
                <h1>imagesQ(ueue.js) Demo</h1> 
                <!-- <img id="show_me" src="images/id1.png"> -->
                <img id="show_me" alt="">
                <div id="console_log">Log:</div> 
                <script type="text/javascript"> 
                    /*
                        imagesQueue Usage Example:
                    */
                    // the img element to show
                    show_img = document.getElementById('show_me');
                    log_e = document.getElementById('console_log');
                    log = function(output){log_e.innerHTML +='<br/>'+(output)};
                    imagesQueue = imagesQ;
                    // On every image loaded show progress:
                    imagesQueue.onLoaded = function()
                    {
                        show_img.src = imagesQueue.current.src;
                        var output = 'Q1 '+(imagesQueue.images.length)+"/"+(imagesQueue.qLength)+" ("+imagesQueue.current.src+") Loaded (onLoaded)";
                        log(output);
                    }
                    // When done say so.
                    imagesQueue.onComplete = function()
                    {
                        QueuesCompleteAll();
                    }
                    log('Q1 Queued 10 images (queue_images)');
                    var now =(new Date).getTime(); // make sure to get non-cached images
                    imagesQueue.queue_images(['images/id1.png'+now,
                                              'images/id1-1.png'+now,
                                               'images/id1-2.png'+now,
                                               'images/id1-3.png'+now,
                                                'images/id2.png'+now,
                                                'images/id2-1.png'+now,
                                                'images/id2-2.png'+now,
                                                'images/id2-3.png'+now,
                                                'images/id3.png'+now,
                                                'images/id3-1.png'+now]); 

                    log('Starting the queue (process_queue)');
                    var start = (new Date).getTime();
                    imagesQueue.process_queue();
                    log('This is the next line in the code after process_queue, to avoid this, you should design create a function for the rest of your code and call it upon onComplete.');
                    function QueuesCompleteAll(){
                        var diff = (new Date).getTime() - start;
                        log('All Done ('+diff+'ms)');
                    }
                </script> 
        </body> 
</html>

At the moment, I couldn't get it to work :( I uploaded the imagesQueue script and linked it to the page and replaced the image values from the original demo page to what's in my development site.

Ashcraft answered 27/5, 2011 at 9:6 Comment(1)

compare to the demo you have overseen in your page that your "'images/id1-1.png+now'," is wrong. The now variable shall be a parameter, and don't extend your file extension ;-) – Halcomb 30/5, 2011 at 8:45

H

0

unfortunatly on this page there is no explaination, like jquery demos. But there is a link which is easy to oversee, so I post it for you here: imageQ-Demo. If you read the source code, the source of imageQ it self is nested within scripttag in the <head></head> section. I recommend that you move this source code into an extra file. The customised code ist nested within the <body></body> section. What you look for is

<script type="text/javascript">
    //Make an instance of imageQ
    imagesQueue = imagesQ;
    //Define the url of all your images
    imagesQueue.queue_images (['', '', ...]);
    //Start the preloading
    imagesQueue.process_queue();
</script>

hopefully it will helps you.

Btw, thank you for this link. ;-)

Halcomb answered 27/5, 2011 at 9:29 Comment(2)

@nick-weaver - no problem, parallel caching is useful :) thanks for this :) still having a bit of a problem, though :( here's a test page I did patterned after your demo page: *oops, won't fit in the comment block :( I'll put it in the original entry instead. – Ashcraft 30/5, 2011 at 0:28

@poch compare to the demo you have overseen in your page that your "'images/id1-1.png+now'," is wrong. The now variable shall be a parameter, and don't extend your file extension ;-) – Halcomb 30/5, 2011 at 7:53

Y

2

Your idea is good, when you want to have a fluent image change on-click. Altough script is coded in pure javascript (you can use more convinient approach: http://engineeredweb.com/blog/09/12/preloading-images-jquery-and-javascript) it shouldn't have such big influence on performance. Maybe the reason lays somewhere else. Maybe your images are too heavy...

Another solution besides javascript is using pure CSS approach and i suppose it would be much faster. Try to place all the images on single PNG and in CSS try to manipulate background-position value of the individual tabs. For example:

.tab {
    background-image:url('single.png');
}
#tab5 {
    background-position: 10px 20px;
}
#tab5:hover {
    background-position:10px 25px;
}

This way all images would be loaded once at one time.

Yokefellow answered 27/5, 2011 at 9:53 Comment(2)

@paweł-forys - Thanks for this :) I looked at my images and they were like 15 - 23kb. Individually, they're small, but perhaps collectively they're undermining performance in some way? Another thing I didn't take into consideration was that I had a lot of things open last Friday. I checked today and it's not as slow as last Friday since I only had Outlook, 2 SP Designer windows, and 3 IE tabs open. I'll try out that script, though, as the current setup is still having performance issues. I'll try out the parallel caching first. – Ashcraft 30/5, 2011 at 0:3

, but that JQuery code you sent me will now be incorporated to my global js file to be used in another page :) * hahaha had to break my comment down to two parts, ran out of space. – Ashcraft 30/5, 2011 at 0:3

H

0