programing

j스크롤에 추가 데이터 로드 쿼리

javamemo 2023. 3. 26. 09:17
반응형

j스크롤에 추가 데이터 로드 쿼리

div.loading이 보이는 경우에만 스크롤에 더 많은 데이터를 구현하려면 어떻게 해야 하는지 궁금할 뿐입니다.

보통 페이지 높이와 스크롤 높이를 찾아 더 많은 데이터를 로드해야 하는지 확인합니다. 그러나 다음 예는 그보다는 조금 복잡합니다.

다음 이미지는 완벽한 예입니다.드롭 다운 박스에 두 개의 .loading div가 있습니다.사용자가 콘텐츠를 스크롤할 때 표시되는 콘텐츠 중 하나가 콘텐츠에 대한 추가 데이터 로드를 시작합니다.

여기에 이미지 설명 입력

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

jQuery에서 스크롤 기능을 사용하여 페이지 하단을 눌렀는지 확인합니다.이 버튼을 누르면 ajax 호출(ajax 응답까지 로딩 이미지를 여기에 표시할 수 있음)을 하고 다음 데이터 세트를 가져와 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);
});

모든 문서 스크롤이 아닌 경우, 예를 들어 스크롤이 있는 경우div이 문서에서 위의 솔루션은 적응이 없으면 작동하지 않습니다.다음은 div 스크롤바가 바닥에 도달했는지 확인하는 방법입니다.

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

다음은 예를 제시하겠습니다.

  1. 아래로 스크롤하면 html 요소가 추가됩니다.이 부가 메커니즘은 2회만 실시되고 마지막으로 파우더블루 버튼이 부가됩니다.

<!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
  }
});

참조용:

관련 SO 질문

크롬 버그

화면에 오류가 발생하지 않도록 Math.ceil을 더 사용하는 것이 좋습니다.
왜냐하면 몇몇 다른 화면에서는 정확하지 않기 때문입니다.
console.log를 보고 알았어요.

console.log($(window).scrollTop()); //5659.20123123890

그리고.

console.log$(document).height() - $(window).height()); // 5660

그래서 당신의 코드를 편집해서

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

또는 스크롤하기 전에 서버에서 데이터 로드 허용을 선택합니다.

if ($(window).scrollTop() >= ($(document).height() - $(window).height() - 200)) {
 // Load data
}

@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 scroll Load]는 새로운 데이터가 추가될 때까지 콜을 차단하기 위해 사용됩니다.

이게 도움이 됐으면 좋겠다.

솔루션을 포장할 수 있는 좋은 기능을 찾느라 시간이 좀 걸렸어요.어쨌든, 이것은, 1 페이지 또는 사이트 전체에 복수의 컨텐츠를 로드하는 경우에, 보다 좋은 해결책이라고 생각되는 것이 되었습니다.

기능:

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에서 페이지 로드에 대한 영향을 볼 수 있습니다(예:).

특히 div가 표시되었을 때 데이터를 로드하는 것이지 사용자가 페이지 끝에 도달했을 때 로드하는 것이 아닙니다.

질문에 대한 최선의 답변은 다음과 같습니다.https://stackoverflow.com/a/33979503/3024226

언급URL : https://stackoverflow.com/questions/14035180/jquery-load-more-data-on-scroll

반응형

'programing' 카테고리의 다른 글

키 값 쌍의 유형 스크립트 맵을 정의하는 방법.여기서 key는 숫자이고 value는 개체의 배열입니다.  (0) 2023.03.26
헤더에 위젯을 추가하는 방법.wordpress로 php?  (0) 2023.03.26
함수 호출 후 괄호 2세트  (0) 2023.03.26
Angular에서 컨트롤러를 다른 컨트롤러에 주입하려면 어떻게 해야 합니까?JS  (0) 2023.03.26
부탁한다.ASP 내의 파일네트워크 코어  (0) 2023.03.26

'programing'의 다른글

  • 현재글j스크롤에 추가 데이터 로드 쿼리

관련글

댓글

티스토리툴바