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

148

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

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

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

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

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

— Basit
источник

286

В 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
источник

5

Это отличное и простое решение;) Вы можете улучшить этот код с помощью следующих строк в вызове ajax: new_element.hide().appendTo('.your_div').fadeIn(); $(window).scrollTop($(window).scrollTop()-1);первая строка добавляет элементы хорошим способом, вторая гарантирует, что ваша функция никогда не останавливается в нижней части страницы.

— Alekwisnia

34

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

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

— Джефф Путц

2

У Райана Бейтса есть отличный эпизод по этому поводу: railscasts.com/episodes/114-endless-page . Существует также пересмотренная версия, но вам может понадобиться подписка.

— Ви

4

Если кто-то хочет знать, прокрутил ли пользователь до конца, он может использовать это условие if внутри отображаемого здесь условия if: if ($ (window) .scrollTop () + $ (window) .height () == $ (document ) .height ()) {console.log («Прокручиваем до дна!»); }

— Рой Шоа

5

Этот ответ не тот, который я задал в вопросе.

— Базит

84

Вы слышали о плагине 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
источник

8

есть ли шанс демонстрации через jsfiddle?

— cwiggo

4

Хорошее предложение, но худшая путевая точка плагина js ... потраченное впустую мое время .... Ответ ниже был намного быстрее и быстрее

— Karan Datwani

2

Какой ответ ниже вы считаете лучшим?

— Вуно

Вы можете сослаться на мой ответ для реализации Lazy Loader. stackoverflow.com/a/45846766/2702249

— Ом Сан

9

Вот пример:

При прокрутке вниз добавляются 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>

Развернуть фрагмент

— Ом Сао
источник

@RohanAshik: я только что проверил. Это работает. Попробуйте прокрутить вниз до конца.

— Ом Сао

@Om Prakash Sao Здесь все работает нормально, но когда я запускаю этот код в возвышенном состоянии, событие срабатывает, когда полоса прокрутки попадает вверх, а не внизу,

— geeky

8

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

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

Для справки:

Схожий вопрос

Chrome Bug

— Прасант КЦ
источник

7

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

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

— Копролал
источник

Спасибо брат! Это действительно помогло мне :)

— Рару

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

— Пит - iCalculator
источник

1

Улучшение @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] используется для блокировки вызова до тех пор, пока не будут добавлены новые данные.

Надеюсь это поможет.

— Мунис Абиди
источник

0

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

Вот лучший ответ на ваш вопрос: https://stackoverflow.com/a/33979503/3024226

— Ихсан
источник