jQuery tải thêm dữ liệu khi cuộn

148

Tôi chỉ tự hỏi làm thế nào tôi có thể thực hiện nhiều dữ liệu hơn khi cuộn chỉ khi div.loading hiển thị.

Thông thường chúng tôi tìm chiều cao trang và chiều cao cuộn, để xem chúng tôi có cần tải thêm dữ liệu không. nhưng ví dụ sau thì ít phức tạp rồi đó.

Hình ảnh sau đây là ví dụ hoàn hảo. Có hai div tải trên hộp thả xuống. Khi người dùng cuộn nội dung, bất kỳ nội dung nào hiển thị, nó sẽ bắt đầu tải thêm dữ liệu cho nội dung đó.

nhập mô tả hình ảnh ở đây

Vậy làm thế nào tôi có thể tìm hiểu xem .loading div có hiển thị cho người dùng hay không? Vì vậy, tôi có thể bắt đầu tải dữ liệu cho div đó.

— Basit
nguồn

286

Trong jQuery, kiểm tra xem bạn đã chạm vào cuối trang bằng chức năng cuộn chưa. Khi bạn nhấn vào đó, hãy thực hiện cuộc gọi ajax (bạn có thể hiển thị hình ảnh đang tải ở đây cho đến khi phản hồi ajax) và nhận tập dữ liệu tiếp theo, nối nó vào div. Hàm này được thực thi khi bạn cuộn xuống trang một lần nữa.

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

— Deepakssn
nguồn

5

Giải pháp này rất hay và đơn giản nhất;) Bạn có thể cải thiện mã này bằng các dòng sau trong lệnh gọi ajax: new_element.hide().appendTo('.your_div').fadeIn(); $(window).scrollTop($(window).scrollTop()-1);Dòng đầu tiên nối các phần tử theo cách hay, thứ hai đảm bảo rằng chức năng của bạn không bao giờ dừng ở cuối trang.

— alekwisnia

34

Tôi tiếp cận điều này theo cách tương tự, tính đến thực tế là bạn luôn có những thứ tùy ý (điều hướng) ở cuối trang và bạn thực sự muốn tải trước khi bạn chạm đáy. Vì vậy, chức năng bên trong của tôi là:

var end = $("#BottomThing").offset().top; var viewEnd = $(window).scrollTop() + $(window).height(); var distance = end - viewEnd; if (distance < 300)    // do load

— Jeff Putz 13/12/13

2

Ryan Bates có một tập phim xuất sắc về điều này: railscasts.com/episodes/114-endless-page . Ngoài ra còn có một phiên bản sửa đổi nhưng bạn có thể cần đăng ký.

— Vee

4

Nếu ai đó muốn biết nếu người dùng đã cuộn xuống phía dưới, anh ta có thể sử dụng điều này nếu điều kiện bên trong nếu điều đó hiển thị ở đây: if ($ (window) .scrollTop () + $ (window) .height () == $ (tài liệu ) .height ()) {console.log ('Cuộn xuống phía dưới!'); }

— Roy Shoa

5

Câu trả lời này không phải là những gì tôi đã hỏi trong câu hỏi.

— Basit

84

Bạn đã nghe nói về plugin jQuery Waypoint .

Dưới đây là cách đơn giản để gọi một plugin điểm tham chiếu và để trang tải thêm Nội dung sau khi bạn chạm đến đáy khi cuộn:

$(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);
});

— defau1t
nguồn

8

bất kỳ cơ hội của một cuộc biểu tình thông qua jsfiddle?

— cwiggo

4

đề xuất tốt nhưng điểm tồi tệ nhất của plugin js .. đã lãng phí rất nhiều thời gian của tôi .... câu trả lời dưới đây nhanh hơn nhiều nhanh hơn

— Karan Datwani

2

Câu trả lời nào dưới đây bạn thấy là tốt nhất?

— wuno

Bạn có thể tham khảo câu trả lời của tôi để thực hiện Lazy Loader. stackoverflow.com/a/45846766/2702249

— Om Sao

9

Đây là một ví dụ:

Khi cuộn xuống phía dưới, các phần tử html được thêm vào. Cơ chế nối thêm này chỉ được thực hiện hai lần và sau đó một nút có màu bột được thêm vào cuối cùng.

<!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>

Mở rộng đoạn trích

— Ô Sao
nguồn

@RohanAshik: Tôi vừa kiểm tra. Nó đang hoạt động. Hãy thử cuộn xuống cho đến cuối.

— Om Sao

@Om Prakash Sao Nó hoạt động tốt ở đây, nhưng khi tôi chạy mã này một cách tuyệt vời thì sự kiện sẽ hoạt động khi thanh cuộn chạm đỉnh không phải là đáy, \

— geeky

8

Câu trả lời được chấp nhận của câu hỏi này có một số vấn đề với chrome khi cửa sổ được phóng to lên giá trị> 100%. Đây là mã được các nhà phát triển chrome khuyên dùng như một phần của lỗi tôi đã nêu ra trên cùng.

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

Để tham khảo:

Câu hỏi SO liên quan

Lỗi Chrome

— KC Prasanth
nguồn

7

Nếu không phải tất cả các cuộn tài liệu của bạn, giả sử, khi bạn có cuộn divtrong tài liệu, thì các giải pháp trên sẽ không hoạt động nếu không có sự điều chỉnh. Dưới đây là cách kiểm tra xem thanh cuộn của div có chạm đáy không:

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

— Bản sao
nguồn

Cảm ơn nhé người anh em! Điều này thực sự giúp tôi :)

— Raru

1

Tôi đã dành một chút thời gian để cố gắng tìm một chức năng tốt đẹp để bọc một giải pháp. Dù sao, kết thúc với điều này mà tôi cảm thấy là một giải pháp tốt hơn khi tải nhiều nội dung trên một trang hoặc trên một trang web.

Chức năng:

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

Sau đó, bạn có thể gọi hàm bằng cách sử dụng cửa sổ khi cuộn (ví dụ: bạn cũng có thể liên kết nó với một nhấp chuột, v.v. như tôi cũng làm, do đó là hàm):

Để sử dụng:

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

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

Cách tiếp cận này cũng sẽ hoạt động để cuộn div, v.v ... Tôi hy vọng nó có ích, trong câu hỏi trên, bạn có thể sử dụng phương pháp này để tải nội dung của mình trong các phần, có thể nối thêm và từ đó rê bóng cung cấp tất cả dữ liệu hình ảnh đó thay vì nguồn cấp dữ liệu hàng loạt.

Tôi đã sử dụng phương pháp này để giảm chi phí trên https://www.taxformcalculator.com . Nó đã bị lừa, nếu bạn nhìn vào trang web và kiểm tra yếu tố, v.v. bạn có thể thấy tác động đến tải trang trong Chrome (làm ví dụ).

— Pete - iCalculator
nguồn

1

Cải thiện câu trả lời @deepakssn. Có khả năng bạn muốn dữ liệu tải một chút trước khi chúng tôi thực sự cuộn xuống phía dưới .

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] được sử dụng để chặn cuộc gọi cho đến khi một dữ liệu mới được thêm vào.

Hi vọng điêu nay co ich.

— Moonis Abidi
nguồn

0

Bạn đặt câu hỏi cụ thể là về việc tải dữ liệu khi div rơi vào chế độ xem và không phải khi người dùng đến cuối trang.

Đây là câu trả lời tốt nhất cho câu hỏi của bạn: https://stackoverflow.com/a/33979503/3024226

— Ihsan
nguồn