jQuery завантажує більше даних у прокрутку

148

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

Зазвичай ми шукаємо висоту сторінки та висоту прокрутки, щоб побачити, чи потрібно нам завантажувати більше даних. але наступний приклад є мало складним, ніж це.

Наступний образ - ідеальний приклад. Є два розвантажувальні файли. Коли користувач прокручує вміст, що б не було видно, він повинен почати завантажувати більше даних.

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

Тож як я можу дізнатись, чи є .loading div бачний користувачеві чи ні? Тож я можу почати завантажувати дані лише для цього діва.

— Басіт
джерело

286

У jQuery перевірте, чи потрапили ви внизу сторінки за допомогою функції прокрутки. Як тільки ви натиснете на це, зробіть дзвінок в ajax (ви можете показати тут завантажувальне зображення до відповіді на ajax) і отримаєте наступний набір даних, додайте його до діву. Ця функція виконується, коли ви знову прокручуєте сторінку вниз.

$(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 ($ (window) .scrollTop () + $ (window) .height () == $ (документ ) .height ()) {console.log ('Прокручується донизу!'); }

— Рой Шоа

5

Ця відповідь - це не те, про що я задав питання.

— Базит

84

Ви чули про плагін 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);
});

— defau1t
джерело

8

будь-який шанс на демонстрацію через jsfiddle?

— cwiggo

4

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

— Каран Датвані

2

Яку відповідь нижче ви визнали найкращою?

— wuno

Ви можете звернутися до моєї відповіді щодо впровадження Lazy Loader. stackoverflow.com/a/45846766/2702249

— Om Sao

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 Тут добре працює, але коли я запускаю цей код піднесено, то подія працює, коли смуга прокрутки потрапляє вгорі, а не вниз, \

— примхливий

8

Прийнята відповідь на це питання має певну проблему із хромом, коли вікно збільшується до значення> 100%. Ось код, рекомендований розробниками chrome як частина помилки, яку я підняв на тому ж самому.

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

Довідково:

Питання, пов'язані ТА

Помилка Chrome

— Прасант KC
джерело

7

Якщо не всі ваші документи прокручуються, скажімо, коли у вас є прокрутка 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"); 
    });

Цей підхід також повинен працювати для прокрутки дівок тощо. Я сподіваюся, що це допоможе, у вищезазначеному питанні ви могли б використовувати цей підхід для завантаження вмісту в розділи, можливо, додавати і тим самим переносити подачу всіх цих зображень, а не об'ємного каналу.

Я використовував такий підхід, щоб зменшити накладні витрати на 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

— Іхсан
джерело