jQuery - 엄청난 양의 스크롤 가능한 데이터를 표현하는 가장 좋은 방법

Question

길이가 1.5k 인 배열이 있는데 각 항목을 표시해야합니다 (항목 당 DIV 집합). 한 번에 모두 표시하면 브라우저가 중단됩니다. 대부분의 시간. 이 데이터를 제공하는 데있어 가장 유연하고 쉽고 사용자 친화적 인 방법을 찾아 내기 위해 노력하고 있습니다. 내 아이디어는 모두 만들기가 어렵거나 사용자 친화적이지 않았습니다. 지금까지의 생각했습니다 무엇 :

• 페이지로
• 그룹 항목과 (스크롤 이벤트를하지 전환 (이것은 모든 화면 구성에서 작동하도록 하드) 사용자의 뷰포트에있는 DIV의의를 보여 사용자 친화적이지 않고 스크롤 바 없음)
• "더로드하기"를 누르면 더 많은 항목을로드 할 수 있습니다 (사용자 친화적이지는 않지만 1000 번째 항목을 얻으려면 버튼을 100 번 클릭해야합니다. 브라우저를 중지하십시오.)

이 데이터를 표시하는 가장 좋은 방법은 무엇입니까? 이 endless scrolling 스크립트를 사용

Answer 1

, 당신은 할 수 :

는

var items  = [], // array of objects to load on scroll 
    batchCount = 10; 

// load more items 
function showMore(howMany){ 
    // remove X amount of items from the total hidden item's jQuery object and show them 
    var toLoad = items.splice(0, howMany), // from the items array, cut only the batch we need to show 
     i; 

    // Make sure that an image in the current batch is loaded before adding it to the DOM 
    for(i=toLoad.length; i--;){ 
     // show item toLoad[i] 
     batchCount--; 
    } 
} 

function onScrollEnd(){ 
    if(batchCount <= 0 && items.length){ 
     // load 10 items on every scroll 
     batchCount = 10; 
     showMore(batchCount); 
    } 
} 

$(window).endless({offset:'20%', callback: onScrollEnd }); 

귀하의 items 배열은 DOM 요소의 자바 스크립트 배열 또는 요소의 jQuery를 일, 할 수있는 당신이해야이 예제 코드에 대한 실제 배열에 convert 많은 변화없이 일할 수 있습니다.