Infinite scroll is loading several times per request

[rajanverma-me]

Hi, I am using the plugin and its totally fine until I tried something different.
On single page its working fine. But i want to use Pills like design.
I have 4-8 tabs (as categories) and single container. Whenever I switch tabs I used to delete all the data and and reinitialize the plugin. but with each click the initialisation is getting increased by one.
You can check the behaviour here. http://revamp.sillypicks.com/
Click on any category tab and look an eye on console window. You will see the category name being echoed 3-4 times on single click. Suppose if you click funny tab for first time, you will see 2 times funny echoing in console, try switching to some other tab and come back to funny again and you will see funny echoing 4 times on single line.
Try switching the any 2 categories tab back and forth. and see the network and results in console log.

Bellow is the JS code.

var $grid = $('#test7 .images-container');  
function loadData(id){      
    // get Masonry instance
    var msnry = $grid.data('masonry');

  $container = $grid.infiniteScroll({
    // options
    path: function(res) {
      console.log(id)
      var pageNumber = ( this.loadCount + 1 );
      return '/filter/'+id+'/'+ pageNumber;
    },
    history: false,
    responseType: 'text',
    outlayer: msnry
  });

  $container.on( 'load.infiniteScroll', function( event, response ) {
    // parse response into JSON data
    var res = JSON.parse( response );
    console.log(res);
    // compile data into HTML
    img_block(res);
  // load initial page
  });
  $container.infiniteScroll('loadNextPage');
}

loadData("all-pictures");

img_block = function(res){
  var items = "";
  $.each(res.data, function(key, val){          
    items = '\
      <a style="color: #23527c;" href="/pictures/'+val.slug+'" class="pic">\
        <div class="masonryImage gallery-item gallery-expnd">\
          <div class="placeholder">\
            <div class="gallery-curve-wrapper">\
              <div class="gallery-cover gray">\
                <img src="'+val.image.url+'" class="img-responsive" crossorigin="anonymous" />\
              </div>\
            </div>\
            <div class="score-chip">\
              <span class="score-box"><b>'+val.likes+'</b><br><small>Score</small> </span>\
            </div>\
          </div>\
        </div>\
      </a>';
    // append item elements
    $grid.append(items);
    $grid.imagesLoaded( function(){
      $grid.masonry({
        itemSelector : '.masonryImage',
        columnWidth: '.masonryImage'
      });
    });
    $grid.masonry('reloadItems');
  });
  return items;
}

$(".pin-top li:not(:first-child)").on("click", function(){
  var id = $(this).attr("id");
  $grid.html(null);
  $grid.infiniteScroll('destroy');
  $grid.data('infiniteScroll', null);
  loadData(id);
}); 

[desandro]

Hi! Were you able to resolve this?

[rajanverma-me]

Nope.

[desandro]

If you're manually triggering Infinite Scroll, you may need to disable loadOnScroll. See Button behavior demos

[rajanverma-me]

Not actually. Its not making any new request, and that's fine. Problem is If you see in Network tab in DevTools of chrome, you will see plugin is initializing several times (look an eye on console) on single request while switching category TABS. Check this. 'funny' is echoed 4 times which is logged
inside path option while initializing. (see console.log(id))

path: function(res) {
console.log(id)
var pageNumber = ( this.loadCount + 1 );
return '/filter/'+id+'/'+ pageNumber;
}

[desandro]

I was able to find a bug. See #807 (comment)

---

Thanks for that. You should be able to re-initialize both Infinite Scroll and Masonry by first destroying both plugin instances

$(document).on("click", ".reload", function(e) {
  $grid.infiniteScroll('destroy');
  $grid.masonry('destroy');
  initMasonry();
});

See demo https://codepen.io/desandro/pen/ab2cc8162dde24c18ff12caf360d6186

However, there currently is a bug that doesn't properly remove jQuery data on destroy. I've added a fix for this that will be in the next release. Until then, you can this duck punch

// duck punch
var destroy = InfiniteScroll.prototype.destroy;
InfiniteScroll.prototype.destroy = function() {
  destroy.apply( this, arguments );
  // remove jQuery data
  if ( jQuery && this.$element ) {
    jQuery.removeData( this.element, 'infiniteScroll' );
  }
};

[desandro]

Infinite Scroll v3.0.5 has been released.