Melhor maneira de pré-carregar imagens

Question

May 27, 2011, 11:06 AM

Melhor maneira de pré-carregar imagens

Qual é a melhor maneira de pré-carregar imagens? Estou tentando criar uma guia de imagem com cerca de 59 imagens png. Aqui está o código que tenho até agora:

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

Agora, minha página demora um pouco para carregar e não consigo entender por que clicar em uma guia parece carregar o iframe lentamente. O carregamento do src do iframe faz com que as imagens sejam pré-carregadas novamente? Seria melhor carregar as imagens relevantes ao clicar em vez de carregá-las quando a página abrir?

Também encontrei uma boa alternativa na forma do script de carregamento paralelo do lieldulev (imagesQueue) mas não sei como usá-lo.

BTT, eu não sou versado em JavaScript, então estou tentando aprender enquanto trabalho. No momento, o que estou fazendo é implementar técnicas que pesquiso e tentando entender suas funções, daí a razão pela qual minha codificação não é tão limpa quanto eu gostaria que fosse, às vezes até usando apenas "força bruta" ineficiente códigos para obter o efeito desejado. Eu gostaria de melhorar isso, no entanto, e qualquer ajuda seria apreciada.

Quanto ao script de cache paralelo, aqui está uma página de teste que eu montei com o modelo após a demonstração de Nick:

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

No momento, não consegui fazê-lo funcionar :( Carreguei o script imagesQueue e o vinculei à página e substituí os valores da imagem da página de demonstração original pelo conteúdo do meu site de desenvolviment