預加載圖像的最佳方式

預加載圖像的最佳方式是什麼？我正在嘗試創建一個包含大約59 png圖像的圖像選項卡。這裏是我到目前爲止的代碼：預加載圖像的最佳方式

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

的事情是我現在的頁面需要一段時間來加載，我想不通爲什麼點擊標籤上似乎在慢慢加載的iframe。加載iframe的src是否會導致圖像再次被預加載？ onclick加載相關圖像，而不是在頁面打開時全部加載它會更好嗎？

我還發現了lieldulev的並行加載腳本(imagesQueue)的一個很好的選擇，但我不知道如何使用它。

順便說一句，我不熟悉JavaScript，所以我努力學習，因爲我的工作。現在，我正在執行的技術是我研究並試圖理解它們的功能，因此我編碼的原因並不像我希望的那樣乾淨，有時甚至僅僅使用低效的「強力」代碼來獲得所需的效果。不過，我想改善這一點，任何幫助，將不勝感激。

關於並行高速緩衝存儲器的腳本，這是一個測試頁面我建立了構圖之後尼克的演示：

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

此刻，我無法得到它的工作:(我上傳的imagesQueue腳本和鏈接它到頁面，並從原來的演示頁面取代了原來的演示頁面的圖像值到我的開發網站上有什麼。

來源

2011-05-27 Poch

與您在頁面中監督的演示相比，您的「'images/id1-1.png + now'，」是錯誤的。現在變量應該是一個參數，並且不擴展您的文件擴展名;-) – reporter 2011-05-30 08:45:28

不幸的是，在這個頁面上沒有解釋，就像jquery demo。但有一個易於監督的鏈接，所以我在這裏發佈它：imageQ-Demo。如果您閱讀源代碼，imag的源代碼eQ它自己嵌套在<head></head>部分的腳本標籤內。我建議您將此源代碼移到一個額外的文件中。定製代碼ist嵌套在<body></body>部分。你所尋找的是

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

希望它會幫助你。

順便說一句，謝謝你的這個鏈接。 ;-)

來源

2011-05-27 09:29:06 reporter

@ nick-weaver-沒問題，並行緩存很有用:)感謝這:)仍然有一點問題，雖然:(這裏有一個測試頁，我在你的演示頁面後形成了圖案：* oops，不適合註釋塊:(我將它放在原始條目中。 – Poch 2011-05-30 00:28:03

@poch與您在頁面中監督的演示相比，您的「'images/id1-1.png + now'，」是錯誤的。現在變量應該是一個參數，並且不會擴展您的文件擴展名;-) – reporter 2011-05-30 07:53:56

當想要點擊流暢的圖像變化時，您的想法很好。儘管腳本以純javascript編碼（您可以使用更方便的方法：http://engineeredweb.com/blog/09/12/preloading-images-jquery-and-javascript），但它不應該對性能產生如此大的影響。也許原因是在別的地方。也許你的圖像太重...

除了JavaScript的另一個解決方案是使用純粹的CSS方法，我想它會快得多。嘗試將所有圖像放在單個PNG上，並在CSS中嘗試操作各個選項卡的背景位置值。例如：

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

這樣所有的圖像都會一次加載一次。

來源

2011-05-27 09:53:16

@paweł-forys - 謝謝你:)我看着我的圖像，他們像15 - 23kb。單獨來看，它們很小，但也許總體上它們以某種方式破壞了性能？我沒有考慮到的另一件事是上週五我開了很多東西。我今天檢查過了，並沒有上週五那麼慢，因爲我只有Outlook，2個SP Designer窗口和3個IE選項卡。不過，我會嘗試一下這個腳本，因爲當前的設置仍然存在性能問題。我將首先嚐試並行緩存。 – Poch 2011-05-30 00:03:01

，但您發給我的JQuery代碼現在將被合併到我的全局js文件中，以便在另一頁中使用:) * hahaha必須將我的評論分爲兩部分，空間不足。 – Poch 2011-05-30 00:03:47

預加載圖像的最佳方式

回答

相關問題