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는 페이지를 넘길 때 미리로드됩니다.

페이지를 넘길 때 현재 표시된 두 페이지를로드하고 (직접 건너 뛰고 미리로드되지 않음) 다음 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)); 
     }) 
    ); 
};