La mejor manera de precargar imágenes

Question

May 27, 2011, 11:06 AM

La mejor manera de precargar imágenes

¿Cuál es la mejor manera de precargar imágenes? Estoy tratando de crear una pestaña de imagen que tenga alrededor de 59 imágenes png. Aquí está el código que tengo hasta ahora:

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

La cosa ahora es que mi página tarda un tiempo en cargarse, y no puedo entender por qué hacer clic en una pestaña parece cargar el iframe lentamente. ¿Cargar el src del iframe hace que las imágenes se vuelvan a cargar previamente? ¿Sería mejor cargar las imágenes relevantes en el clic en lugar de cargarlas todas cuando se abra la página?

También encontré una buena alternativa en forma de script de carga paralela de lieldulev (imagesQueue) pero no sé cómo usarlo.

BTW, no estoy bien versado en JavaScript, así que estoy tratando de aprender mientras trabajo. En este momento, lo que estoy haciendo es implementar técnicas que investigo y tratar de comprender sus funciones, de ahí la razón por la cual mi codificación no es tan limpia como me gustaría, a veces incluso usando "fuerza bruta" ineficiente códigos para obtener el efecto deseado. Sin embargo, me gustaría mejorar eso, y cualquier ayuda sería apreciada.

En cuanto al script de caché paralela, aquí hay una página de prueba que configuré siguiendo el modelo de la demostración 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>

En este momento, no pude hacerlo funcionar :( Subí el script imagesQueue y lo vinculé a la página y reemplacé los valores de imagen de la página de demostración original a lo que está en mi sitio de desarrollo.

Deja tu comentario