用于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)); 
     }) 
    ); 
};