jQuery Бесконечная загрузка прокрутки слишком рано

Я попытался реализовать jQuery Infinite Scroll. Но загрузка слишком рано. Сначала он срабатывает, даже если я прокручиваю только пиксель страницы 1. И затем он все еще срабатывает далеко, прежде чем я прокручу страницу донизу.jQuery Бесконечная загрузка прокрутки слишком рано

Сначала я делаю вызов Ajax для заполнения первой страницы. Затем я инициализирую Infinite Scroll. Как следует.

$.ajax({ 
    url  : 'data/page1.html', 
    cache : true, 
    dataType : 'html', 
    success : function(newElements) { 
     $('#container') 
      .append(newElements) 
      .infinitescroll({ 
       // -- selector for: -- 
       navSelector : '#pagenav', // the paged navigation 
       nextSelector : '#pagenav', // the NEXT link (to page 2) 
       itemSelector : '.item', // all items you'll retrieve 
       // -- 
       loading  : { 
        finishedMsg: 'No more items to load', 
        img: 'images/ajax-loading.gif' 
       } 
      }); 
    } 
});

~~Я упростил мои файлы на here для демонстрационных целей.~~

EDIT: Demonstration on Plunker.

источник

2015-01-24 Ian Y.

как насчет установить тайм-аут внутри успеха. – pkrawat1

@ pkrawat1: Не знаю, что это значит, но я попытался положить 'setTimeout (function() {$ ('# container'). Append (newElements)}, 0)' in success и ничего не изменилось. –

Я говорил, что вы можете отложить процесс, дав ему задержку в 1000 мсек или около того. – pkrawat1

Попробуй как этот

$(document).ready(function() { 

    $('#container').infinitescroll({ 
    dataType: 'html', 
    appendCallback: false, 
    navSelector: '#pagenav', // selector for the paged navigation 
    nextSelector: '#pagenav', // selector for the NEXT link (to page 2) 
    itemSelector: '.item', 
    pixelsFromNavToBottom: 50 
    }); 

});

Plunker

источник

2015-02-02 06:33:08 samir

Отлично. Это тоже работает. Спасибо. –

Попробуйте

$(document).ready(function() { 
    $.ajax({ 
    url: "data/page1.html", 
    cache: true, 
    dataType: "html", 
    success: function(newElements) { 
     setTimeout((function() { 
     $("#container").append(newElements).infinitescroll({ 
      navSelector: "#pagenav", 
      nextSelector: "#pagenav", 
      itemSelector: ".item", 
      loading: { 
      finishedMsg: "No more items to load", 
      img: "images/ajax-loading.gif" 
      } 
     }); 
     }), 5000); 
    } 
    }); 

});

источник

2015-01-24 04:02:09 pkrawat1

Спасибо. Хотя он все тот же. Постскриптум Я перенес свою демонстрацию на Плункера, чтобы все сразу увидели это в действии. –

Я была такая же проблема, когда я искал бесконечный плагин прокрутки, так что я в конечном итоге с помощью Endless Scroll.

Хорошая вещь об этом плагине, что вы можете определить параметры, такие как «bottomPixels», как показано в следующем примере:

$(document).endlessScroll({ 
    bottomPixels: 300, 
    fireDelay: 200, 
    callback: function() { 
     if ($('#table').length > 0 && !loadedAllEntries && !loadPending) { 
      loadEntries($('#table tbody tr').size()); 
     } 
    }, 
    ceaseFire: function() { 
     if (loadedAllEntries) 
      return 1; 

     if ($('#table').length === 0) 
      return 2; 
    } 
});

Я установил loadPending истина в начале каждого запроса, так что на каждый данный момент активен только один запрос. Надеюсь это поможет.

источник

2015-01-26 12:30:42

После проверки исходного кода я нашел on line 423, что загрузка имеет какое-то отношение к положению навигации. Затем я понял, что скрыл навигацию, установив в мой CSS display: none;, что привело к тому, что скрипт не смог правильно вычислить положение навигации. После удаления display: none; проблема устранена.

Спасибо всем, кто пытался мне помочь.

источник

2015-01-27 03:36:45

jQuery Бесконечная загрузка прокрутки слишком рано

ответ

Смежные вопросы