JQuery загружает больше данных на прокрутку

Мне просто интересно, как я могу реализовать больше данных для прокрутки только в том случае, если вид div.loading виден.

Обычно мы ищем высоту страницы и высоту прокрутки, чтобы посмотреть, нужно ли загружать больше данных. но следующий пример немного сложнее, чем тот.

Следующее изображение - прекрасный пример. в раскрывающемся списке есть два .loading div. Когда пользователь просматривает контент, в зависимости от того, что видно, он должен начать загрузку для него большего количества данных.

enter image description here

Итак, как я могу узнать, доступен ли показ .load div для пользователя или нет? Поэтому я могу начать загрузку данных только для этого div.

Ответы

Ответ 1

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

Ответ 2

Слышали ли вы о плагине jQuery Waypoint.

Ниже приведен простой способ вызова плагина путевых точек и наличие на странице загрузки большего количества контента, когда вы достигнете нижней части прокрутки:

$(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

Вот пример:

  • При прокрутке вниз, элементы html будут добавлены. Этот механизм добавления выполняется только дважды, а затем добавляется кнопка с цветом порошка.

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