[JQUERY] 스크롤에 더 많은 데이터를로드 jQuery를

스크롤에 더 많은 데이터를로드 jQuery를

해결법

1. ---

   1.jQuery를, 당신은 스크롤 기능을 사용하여 페이지 하단에 충돌 여부를 확인합니다. 당신이 충돌하면, 아약스 호출 (당신이 여기 아약스 응답까지 로딩 이미지를 표시 할 수 있습니다) 및 데이터의 다음 세트를 얻을 수 있도록, APPEND 그것은 사업부에. 다시 페이지를 아래로 스크롤이 기능이 실행됩니다.

   jQuery를, 당신은 스크롤 기능을 사용하여 페이지 하단에 충돌 여부를 확인합니다. 당신이 충돌하면, 아약스 호출 (당신이 여기 아약스 응답까지 로딩 이미지를 표시 할 수 있습니다) 및 데이터의 다음 세트를 얻을 수 있도록, APPEND 그것은 사업부에. 다시 페이지를 아래로 스크롤이 기능이 실행됩니다.

   $(window).scroll(function() {
       if($(window).scrollTop() == $(document).height() - $(window).height()) {
              // ajax call get data from server and append to the div
       }
   });
   

2. ---

   2.당신은 jQuery를 웨이 포인트 플러그인에 대해 들었습니다.

   당신은 jQuery를 웨이 포인트 플러그인에 대해 들었습니다.

   아래 플러그인 및 스크롤의 하단에 도달하면 더 컨텐츠 페이지로드를 갖는 중간 점을 호출하는 간단한 방법은 다음과 같습니다

   $(document).ready(function() {
       var $loading = $("<div class='loading'><p>Loading more items&hellip;</p></div>"),
       $footer = $('footer'),
       opts = {
           offset: '100%'
       };
   
       $footer.waypoint(function(event, direction) {
           $footer.waypoint('remove');
           $('body').append($loading);
           $.get($('.more a').attr('href'), function(data) {
               var $data = $(data);
               $('#container').append($data.find('.article'));
               $loading.detach();
               $('.more').replaceWith($data.find('.more'));
               $footer.waypoint(opts);
           });
       }, opts);
   });
   

3. ---

   3.다음은 그 예이다 :

   다음은 그 예이다 :

   <제목> 데모 : 게으른 로더 <스크립트 SRC = "https://code.jquery.com/jquery-3.2.1.min.js"> <스타일> #myScroll { 국경 : 1 픽셀의 고체 # 999; } P { 국경 : 1 픽셀의 고체 #ccc; 패딩 : 50 픽셀; 텍스트 정렬 : 센터; } .loading { 색상 : 빨강; } .dynamic { 배경 색상 : #ccc; 색상 : # 000; }