Бесконечная прокрутка по одной странице за раз

У меня есть скрипт, который загружает новые продукты, когда пользователь прокручивает вниз. Сценарий работает, но у меня есть две проблемы с ним, хотя. Это а) скрипт загружает страницу 1 дважды б) скрипт загружает сразу все страницы вместо одной за раз

Кто-нибудь знает решение? У меня ограниченные знания, поэтому любая помощь очень ценится.

Мой сценарий

<script type="text/javascript">
$(document).ready(function(){

  // var pageSize = {{ collection.limit }};
  var currentPage = 1;
  var collectionPages = {{ collection.pages }};
  var category = '{{ collection.internal.url }}';

  // Appends the new product to the UI
  var appendProduct = function(product, id) {

  $('<div class="product"></div>')
    .html(product)
    .appendTo($(".productsGrid"));

  var i = 1;
  $('.product').each(function() {
    if(i++ % 3 == 0)
      $(this).addClass('last');
   });
  };

  // Load the next products page
  var loadProducts = function() {

    var url = "http://shop.com/"+category+"/page"+currentPage+".ajax";

    $.getJSON(url,function(data) {

      $.each(data.products, function(index, product) {
        appendProduct('<a href="'+product.url+'" title="'+product.fulltitle+'">' +
                    '<img src="'+product.image+'" width="180" height="150" alt="'+product.fulltitle+'" title="'+product.fulltitle+'"'+'</a>' +
                    '<div class="info"><h3><a href="'+product.url+'" title="'+product.fulltitle+'">'+product.fulltitle+''+'</a></h3>' +
                    '<div class="price">'+product.price.price_money+''+'</div>' +
                    '<div class="gridAddToCart"><a class="button grey" href="'+product.url+'" title="'+product.fulltitle+'" rel="nofollow">'+'<span>{{ 'Details' | t }}</span></a>' +
                    '<div style="margin-top:2px;"></div>' +
                    '<a class="opener button blue" href="http://meules1.webshopapp.com/cart/add/'+product.vid+'" title="'+product.fulltitle+'" rel="nofollow"><span>{{ 'Add to cart' | t }}</span></a>'
                   + '<div class="clear"></div>' +
                    '</div><div class="clear"></div></div>'      
        );
      });

    // We're done loading the products, so hide the overlay and update the UI
    $("#overlay").fadeOut();
    });
  };

  // First time, directly load the products
  loadProducts();

  // Append a scroll event handler to the container
  $(window).scroll(function() {
    // activate new load when scrollbar reaches 150 pixels or less from the bottom
    if($(window).height() + $(window).scrollTop() >= $(document).height() - 350) {

      if(currentPage <= collectionPages) {
        $("#overlay").fadeIn();
        loadProducts();
        currentPage++;
      }

    }
  });

});
</script>
Источник

2 ответа

Решение

Проблема А

Вы увеличиваете номер страницы после запуска loadProducts функция:

if(currentPage <= collectionPages) {
  $("#overlay").fadeIn();
  loadProducts();
  currentPage++
}

Вы должны попробовать это:

if(currentPage <= collectionPages) {
  $("#overlay").fadeIn();
  currentPage++; //Moved this ABOVE loadProducts()
  loadProducts();
}

Проблема Б

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

// Append a scroll event handler to the container
$(window).scroll(function() {
  // activate new load when scrollbar reaches 150 pixels or less from the bottom
  if(($(window).height() + $(window).scrollTop() >= $(document).height() - 350) && $("#overlay").is(":hidden")) {

В качестве альтернативы, вы можете установить глобальную переменную, такую ​​как var loading_page = false, Установите это значение в true, когда вы начнете загружать страницу, переключите его в значение false, когда новая страница будет полностью загружена, и разрешите выполнение кода прокрутки только тогда, когда loading_page переменная ложна.

Источник

Это происходит потому, что скрипт запускается дважды, т.е. ваш ajax-вызов должен выполняться несколько раз. Проверьте с HttpFox, вы сможете наблюдать это. Я столкнулся с той же проблемой, когда я реализовал виртуальную прокрутку.

Используйте какой-нибудь флаг, чтобы контролировать это. Проверьте ниже URL/ проблема. Это содержит мой сценарий виртуальной прокрутки, где я избежал этой проблемы. https://stackru.com/questions/19049088/page-clicks-not-working-during-virtual-scroll

Источник
Другие вопросы по тегам