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

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

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

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

введите описание изображения здесь

Так как я могу узнать, видим ли пользователь .loading div или нет? Так что я могу начать загружать данные только для этого div.

121 голос | спросил Basit 26 WedEurope/Moscow2012-12-26T05:28:04+04:00Europe/Moscow12bEurope/MoscowWed, 26 Dec 2012 05:28:04 +0400 2012, 05:28:04

6 ответов


0

В 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
    }
});
ответил deepakssn 13 J0000006Europe/Moscow 2013, 06:02:26
0

Вы слышали о плагине jQuery Waypoint .

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

$(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 26 WedEurope/Moscow2012-12-26T05:30:47+04:00Europe/Moscow12bEurope/MoscowWed, 26 Dec 2012 05:30:47 +0400 2012, 05:30:47
0

Вот пример:

  1. При прокрутке вниз отображаются 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>
ответил Om Sao 23 PM00000090000005531 2017, 21:13:55
0

Принятый ответ на этот вопрос имеет некоторые проблемы с Chrome, когда окно масштабируется до значения> 100%. Вот код, рекомендованный разработчиками Chrome как часть ошибки, которую я поднял на этой же странице.

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

Для справки:

Соответствующий вопрос SO

Chrome Bug

ответил Prasanth K C 11 J0000006Europe/Moscow 2018, 09:47:12
0

Если не все ваши документы прокручиваются, скажем, когда у вас есть прокрутка div в документе, тогда вышеприведенные решения выиграют т работать без приспособлений. Вот как проверить, попала ли полоса прокрутки div внизу:

$('#someScrollingDiv').on('scroll', function() {
    let div = $(this).get(0);
    if(div.scrollTop + div.clientHeight >= div.scrollHeight) {
        // do the lazy loading here
    }
});
ответил The Coprolal 19 +03002018-10-19T14:49:41+03:00312018bEurope/MoscowFri, 19 Oct 2018 14:49:41 +0300 2018, 14:49:41
0

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

Функция:

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 (в качестве примера).

ответил Pete - iCalculator 2 52018vEurope/Moscow11bEurope/MoscowFri, 02 Nov 2018 16:15:54 +0300 2018, 16:15:54

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132