가상 스크롤 - Ajax 사용하지 않고

Question

저는 사용자가 사이트의 데이터 또는 이미지를 스크롤하고 데이터를 시작 부분으로 루프하거나 비트를로드 할 수있게 해주는 다양한 '무한 스크롤'솔루션에서 인터넷을 둘러 보았습니다 진행하다. 같은 선택 상자에서 예를 들어 :

http://ivaynberg.github.com/select2/

내가 뭘하려고 비슷한하지만 난 이미 배열에 내가 목록 항목에 렌더링 출력하는 각각 200 개 + 기록의 전체 데이터 세트를 . 한 번에 5 개의 목록 항목 만 화면에 표시되므로 그 끝 부분에 도달 할 때마다 다음 세트가 이미 (터치/마우스 이벤트를 사용하여) 스크롤되기를 기다리고 있습니다.

각 데이터 세트로 이동할 때 요소를 추가하려고했으나 모바일 장치에서 매우 느립니다. 다음에 시도한 내용은 다음과 같습니다.

1) 장소 보유자를 여러 개 만듭니다.

2) 장소 홀더가 시각적 경계 밖으로 스크롤되면이를 (새로운 데이터를 사용하여) 초기 위치로 다시 밀면 원활한 스크롤의 환상이 생깁니다.

3) 상자 인덱스에서 데이터를 가져올 페이지 인덱스를 찾습니다. 모든 장소 소유자에게 새 데이터를 다시 채 웁니다. 터치/마우스 이동 이벤트 핸들러 내에서

:

이

ondrag: function(e) { 
    var top, row, rows, delta = 1, prefix; 

    if(e.direction === 'up') { 
    e.distance = e.distance * -1; 
    } 

    rows = Math.floor(this._grid.scrollHeight/this._grid.ticketHeight); 

    // Use a simpler row-snap rule. 
    top = (this._previous.top + e.distance) * delta; // Top offset. 
    row = Math.floor(top/this.rowHeight); // Row position. 

    // Makes the scroll infinite by seamlessly bouncing back. 
    if(Math.abs(row) > rows) {     
    top = (e.distance * delta);   
    } 

    elems = this.$el.find('.ticketRow'); 
    for(i = 0; i < elems.length; i++) { 
    elems[i].style.webkitTransform = 'translate(0px,' + ((i * this.rowHeight) + top) + 'px)';  
    } 

    if(this._offset !== Math.abs(row)) { 
    this._offset = Math.abs(row); 

    if(e.direction == 'down') { 
     this._track--; 
    } else { 
     this._track++; 
    } 
    // Get new data from data source and apply it to the place holders. 
    this.update(this._track); 
    } 
}, 

이 그러나 불쾌한 수신 거부/과민 효과를 만듭니다. 또한 이동 된 거리의 배수로 각 행의 새 위치를 설정해 보았지만 여전히 이상한 결과가 나타납니다.

내 질문이 맞습니까? 이미 저를 위해이 일을 저지르고 있는게 있습니까? 더 나은 여전히, 위의 내 수학의 결함은 어디에 있습니까?

도움을 주셨습니다.

참고 : 내 터치 제스쳐를 캡처하려면 hammer.js을 사용하고 있습니다.

Answer 1

모든 항목을 display: none으로 설정하고 초기화시 처음 5 개를 표시 한 다음 scrollPosition을 사용하여 디스플레이를 block으로 설정 했습니까?