用於iPhone的jQuery預加載圖像

Question

  // After a page turn 
      after: function(opts) { 

       var currPageIndex = opts.curr - 1; 

       generatePage(currPageIndex);   // This page 
       generatePage(currPageIndex + 1);  // Right side page 
       generatePage(currPageIndex + 2); 
       generatePage(currPageIndex + 3); 
      } 
     }); 
    }); 

    // Generates the page 
    function generatePage(pageID){    

     // Check not already loaded 
     if(pageID >= 0 && pageID < arrPages.length && !arrPages[pageID][2]) 
     { 
      arrPages[pageID][2] = true; 
      $('#page' + pageID).html('<img src="<%=strProjectPath%>/pages/originals/' + arrPages[pageID][1] + '" alt="Page image" />'); 
     } 
    } 

    // Load first page 
    $(document).ready(function() { 
     generatePage(0); 
     generatePage(1); 
     generatePage(2); 
    }); 

如您所見，當文檔準備就緒時，會生成第0,1和2頁。 0是可立即查看的圖像，然後在他們翻頁時預加載1和2。

當他們翻開頁面時，它會加載當前瀏覽的兩個頁面（直接跳過，並且不會預加載）以及接下來的兩頁。

如何偏好加載，所以它首先加載可立即查看的頁面？你可以使用jquery onload排列下一頁嗎？目前4頁理論上可以同時加載他們的圖像，這對手機來說會很慢。

Answer 1

當然，你可以使用jQueryload()，但是你不應該立即添加所有的圖像。例如，你可以像這樣排列它們：

var preload = function (pageID, rest) { 
    $('#page' + pageID).append(
     $('<img/>', { 
      src: "<%=strProjectPath%>/pages/originals/' + arrPages[pageID][1] + '" 
     }).load(function() { 
      rest.length && preload(rest[0], rest.splice(1)); 
     }) 
    ); 
};