무한스크롤 질문 드립니다.

jungchanhee commented 8 years ago

무한스크롤시 로딩이미지중 서버와 통신을 하여 데이터를 불러오는중

서버 통신이 느려 무한스크롤 로딩이 2번 동작하여

데이터를 2번 불러오는 오류가 생기는데

서버통신이 느려 2번 출력 되는 상태입니다.

스크롤 로딩시 딜레이 주시는 법이나 다른 방법은 없을까요?

kieregh commented 8 years ago

안녕하세요....

우선 아래의 예제를 참고해보시기 바랍니다.

$('.content').infinitescroll({
    dataSource: function(helpers, callback) {
        setTimeout(function() {
            callback({
                content: get__MyList
            });
        }, 300);
    }
});

function get__MyList() {
    var page;
        page++;
       $.post('/path_to/getMyList.php',{
           page : page
    },function(response){
       var result=$.parseJSON(response); // JSON 으로 리턴된 경우
                if(result.content) $('#JP_result').append(result.content); // 데이타 append 
                else $.notify({message: '더이상 데이타가 없습니다.'},{type: 'default'}); // 메세지 출력
                // $.noify 사용법은 아래 참조 
                // http://rc.kimsq.com/controls/notify/
    });      
}

요약하면 아래와 같습니다.

delay

그냥 한가지로 정해주셔도 무관할 듯 합니다.

appendToEle

꼭 지정하지 않도록 수정했습니다. 있는 경우에만 적용됩니다. 아래 커밋 보시고 소스를 직접 수정하시거나 https://github.com/kimsQ/rc/commit/67298a8fe5dbc7ffa76a3fceb275ee3ea4c9414a

아래 최신 소스를 적용하시기 바랍니다. https://github.com/kimsQ/rc/blob/master/js/infinite-scroll.js

content

위 예제와 같이 별도 함수를 호출해도 됩니다. 
별도 함수를 호출해서 ajax 로 데이타 가져와서 원하시는 엘리먼트에 append 해주시고...
 데이타가 없는 경우 '더 이상 데이타가 없다' 는 메세지를 출력하는 방식이 작업하시는데 유연할 것으로  생각합니다.

이상입니다.

jungchanhee commented 8 years ago

해결하였습니다.

감사합니다.

kieregh commented 8 years ago

관련....method 는 테스트 중입니다....

아마도....불필요한 페이지에서 scroll 작동 현상을 발견하신 것으로 예상되는데요.... 이 부분은 무한스크롤 전용 div 를 추가하는 방법으로 해결할 예정입니다. 모달..닫을 때 해당 엘리먼트 전체를 삭제하는 방식입니다.

추후 진행사항 알려드리겠습니다.

gitaeks commented 8 years ago

초기화된 무한 스크롤을 제거하기 위해 아래와 같이 .content-scroll 을 .content 바로 밑에 위치해 주세요. 기능적인 사항은 @kieregh 님이 추가 답변할 것 입니다.

<div class="content">
   <div class="content-scroll">
    ...
  </div>
</div>

app.css 에 .content-scroll를 추가했으니, 갱신 적용해 주세요.

jungchanhee commented 8 years ago

초기화된 무한 스크롤을 제거 하는것이 아니라

서버통신시 원하는 데이터 양을 다 불러 왔다면

더 이상 로딩이미지를 불러올 필요가 없어 무한스크롤 기능을 중지시키는 함수와 위치를

알고 싶어서 질문 했습니다.

kieregh commented 8 years ago

무한 스크롤 해제 이슈와 관련 아래에 등록된 이슈를 먼저 참조하시기 바랍니다. https://github.com/kimsQ/rc/issues/38

위 이슈와 관련하여....무한 스크롤이 적용되야 할 해당 페이지에 아래와 같이 content-scroll 로 감싸주면 됩니다.

<div class="content-scroll">
    기존 마크업
</div>

위 content-scroll 에 초기화된 infinite-scroll 객체는 해당 엘리먼트가 삭제(모달,페이지등 컴포넌트 닫을때 자동으로 content 영역 내부를 삭제하기 때문)되므로써 사라집니다. 결국 연속적으로 호출되는 다른 페이지(무한스크롤이 필요 없는)에는 영향을 주지 않게 됩니다.

이상입니다.

kieregh commented 8 years ago

네...그런거라면...disable 로 하시면 됩니다. 단지, 무한 스크롤 대상 엘리먼트를 전용 엘리먼트로 두는 것은 필요할 것으로 생각합니다.

kimsQ / hd-steel