CODEWITHSUNDEEP
javascriptjqueryinfinite-scroll
Ian Y.
Ian Y.

Reputation: 2457

jQuery Infinite Scroll's loading fires too early

I tried to implement jQuery Infinite Scroll. But the loading fires too early. At first, it fires even if I only scroll the page 1 pixel. And then it still fires far before I scroll the page to the bottom.

At first, I make an Ajax call to fill in the first page. Then I initialize Infinite Scroll. As following.

$.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' 
                 }
            });
    }
});

I had simplified my files at here for demonstration purpose.

EDIT: Demonstration on Plunker.

Upvotes: 0

Views: 1630

Answers (4)

samir
samir

Reputation: 211

Try it like this 

$(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

Upvotes: 1

Loukas Avramidis
Loukas Avramidis

Reputation: 537

I had the same problem when I was looking for an infinite scroll plugin, so I ended up using Endless Scroll.

The good thing about this plugin is that you can define options, such as 'bottomPixels', as shown in the following example:

$(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;
    }
});

I set loadPending to true in the beginning of every request so that only one request is active for every given moment. Hope this helps.

Upvotes: 1

Ian Y.
Ian Y.

Reputation: 2457

After checking the source code, I found on line 423 that the loading has something to do with the position of navigation. Then I realized that I hid navigation by setting display: none; to it in my CSS that caused the script to be unable to calculate the position of navigation correctly. After removing display: none;, the problem has been fixed.

Thank everyone who tried to help me.

Upvotes: 2

pkrawat1
pkrawat1

Reputation: 681

Try this

$(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);
    }
  });

});

Upvotes: 1

Related Questions