JQuery Infinite-Scroll - event fires multiple times when scrolling is fast

If I scroll the page, the jQuery Infinite Scroll event fires twice three times. How can this happen? on next page load, jQuery Infinite Scroll event cannot be triggered by fires.

$(function(){
    var speed = 1000;
    var container = $('#sharelist');
    container.imagesLoaded(function(){
      container.masonry({
        itemSelector: '.share',
        singleMode: true,
        columnWidth: 242,
        isFitWidth: true,
        animate: true,
        animationOptions: {
            duration: speed,
            queue: false
        }
      });
    });
    container.infinitescroll({
      navSelector  : '.page',     
      nextSelector : 'a.next',
      itemSelector : 'div[class=share]',
      loading: {
          finishedMsg: '报告,后面没有了哦.',
          img: 'image/icon_waiting.gif',
          msgText:'加载中'
        }
      },
      function( newElements ) {
        var newElems = $(newElements).css({ opacity: 0 });
        newElems.imagesLoaded(function(){
          newElems.animate({ opacity: 1 });
          container.masonry( 'appended', newElems, true );
          $('.namecard').floatUserInfo();
        });
      }
    );
    $("img").lazyload({
        placeholder : "image/grey.gif",
        effect      : "fadeIn"
     });
  });

      

+3


source to share


1 answer


There's a lot of existing literature out there on throttling resize events and here you are essentially addressing the same issue. Typical solutions involve scheduling an asynchronous handler and then only waiting one time. The most reliable (?) Way is to undo and replace the old handler.

For example:



http://benalman.com/code/projects/jquery-throttle-debounce/examples/throttle/

+3


source







All Articles