[javascript] jQuery는 스크롤에 더 많은 데이터를로드합니다.

div.loading이 보이는 경우에만 스크롤에 더 많은 데이터를 구현하는 방법이 궁금합니다.

일반적으로 더 많은 데이터를로드해야하는지 확인하기 위해 페이지 높이와 스크롤 높이를 찾습니다. 그러나 다음 예제는 그다지 복잡하지 않습니다.

다음 이미지는 완벽한 예입니다. 드롭 다운 상자에 두 개의 .loading div가 있습니다. 사용자가 내용을 스크롤하면 더 많은 데이터를로드하기 시작해야합니다.

그렇다면 .loading div가 아직 사용자에게 표시되는지 여부를 어떻게 알 수 있습니까? 따라서 해당 div에 대한 데이터로드 만 시작할 수 있습니다.

답변

jQuery에서 스크롤 기능을 사용하여 페이지 하단을 쳤는지 확인하십시오. 당신이 그것을 때, 아약스 호출 (아약스 응답까지 여기에 로딩 이미지를 표시 할 수 있음)을 만들고 다음 데이터 세트를 가져 와서 div에 추가하십시오. 이 기능은 페이지를 다시 아래로 스크롤하면 실행됩니다.

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

답변

에 대해 들었습니까 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);
});

답변

예를 들면 다음과 같습니다.

맨 아래로 스크롤하면 html 요소가 적용됩니다. 이 추가 메커니즘은 두 번만 수행 된 다음 powderblue 색상의 버튼이 마지막에 추가됩니다.

<!DOCTYPE html>
<html>
<head>
    <title>Demo: Lazy Loader</title>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <style>
        #myScroll {
            border: 1px solid #999;
        }

        p {
            border: 1px solid #ccc;
            padding: 50px;
            text-align: center;
        }

        .loading {
            color: red;
        }
        .dynamic {
            background-color:#ccc;
            color:#000;
        }
    </style>
    <script>
		var counter=0;
        $(window).scroll(function () {
            if ($(window).scrollTop() == $(document).height() - $(window).height() && counter < 2) {
                appendData();
            }
        });
        function appendData() {
            var html = '';
            for (i = 0; i < 10; i++) {
                html += '<p class="dynamic">Dynamic Data :  This is test data.<br />Next line.</p>';
            }
            $('#myScroll').append(html);
			counter++;

			if(counter==2)
			$('#myScroll').append('<button id="uniqueButton" style="margin-left: 50%; background-color: powderblue;">Click</button><br /><br />');
        }
    </script>
</head>
<body>
    <div id="myScroll">
        <p>
            Contents will load here!!!.<br />
        </p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
    </div>
</body>
</html>

스 니펫 확장

답변

이 질문에 대한 대답은 창을> 100 %로 확대 할 때 크롬에 문제가 있습니다. 여기에 내가 제기 한 버그의 일부로 크롬 개발자가 권장하는 코드가 있습니다.

$(window).scroll(function() {
  if($(window).scrollTop() + $(window).height() >= $(document).height()){
     //Your code here
  }
});

참고로 :

답변

예를 들어, div문서 내에서 스크롤이있을 때 모든 문서가 스크롤 되지 않으면 위의 해결 방법이 적용되지 않습니다. div의 스크롤 막대가 아래쪽에 닿았는지 확인하는 방법은 다음과 같습니다.

$('#someScrollingDiv').on('scroll', function() {
    let div = $(this).get(0);
    if(div.scrollTop + div.clientHeight >= div.scrollHeight) {
        // do the lazy loading here
    }
});

답변

솔루션을 포장하는 멋진 기능을 찾으려고 시간을 보냈습니다. 어쨌든, 여러 페이지를 단일 페이지 또는 사이트에로드 할 때 더 나은 솔루션이라고 생각하는 것으로 끝났습니다.

함수:

function ifViewLoadContent(elem, LoadContent)
    {
            var top_of_element = $(elem).offset().top;
            var bottom_of_element = $(elem).offset().top + $(elem).outerHeight();
            var bottom_of_screen = $(window).scrollTop() + window.innerHeight;
            var top_of_screen = $(window).scrollTop();

            if((bottom_of_screen > top_of_element) && (top_of_screen < bottom_of_element)){
            if(!$(elem).hasClass("ImLoaded"))   {
                $(elem).load(LoadContent).addClass("ImLoaded");
            }
            }
            else {
               return false;
            }
        }

그런 다음 스크롤 할 때 창을 사용하여 함수를 호출 할 수 있습니다 (예를 들어, 내가하는 것처럼 클릭 등에 바인딩 할 수도 있습니다).

쓰다:

$(window).scroll(function (event) {
        ifViewLoadContent("#AjaxDivOne", "someFile/somecontent.html");

        ifViewLoadContent("#AjaxDivTwo", "someFile/somemorecontent.html");
    });

이 방법은 div 등을 스크롤하는데도 효과적입니다. 위의 질문 에서이 방법을 사용하여 콘텐츠를 섹션에로드하고 대량 피드 대신 이미지 데이터를 추가하여 드리블 할 수 있기를 바랍니다.

https://www.taxformcalculator.com 에서 오버 헤드를 줄이기 위해이 접근법을 사용했습니다 . 사이트를보고 요소 등을 검사하면 트릭이 죽었습니다. 예를 들어 Chrome의 페이지로드에 영향을 줄 수 있습니다.

답변

@deepakssn 답변 개선. 실제로 맨 아래로 스크롤 하기 전에 데이터를 약간로드 할 가능성이 있습니다 .

var scrollLoad = true;
$(window).scroll(function(){
 if (scrollLoad && ($(document).height() - $(window).height())-$(window).scrollTop()<=800){
    // fetch data when we are 800px above the document end
    scrollLoad = false;
   }
  });

[var scrollLoad]는 하나의 새 데이터가 추가 될 때까지 호출을 차단하는 데 사용됩니다.

도움이 되었기를 바랍니다.