jQuery无限滚动忽略浏览器反弹

我有这个功能，是根据页码在时间加载5项。但是，当用户滚动到页面底部时，会发生什么情况：$ .post函数触发一次，然后当浏览器弹跳完成时再次触发，因为position_bot == $(document).height()实际上是两次。然后每次加载10个项目。jQuery无限滚动忽略浏览器反弹

我试图找到一种方法来忽略浏览器反弹的情况，所以这个调用只会触发一次。任何建议或帮助将是伟大的。

$(function(){ 
    $('#loading').show(); 
    var page = 1, 
     total_brands = '<?php echo $brandsCount?>', 
     post_link = '<?php echo $brandsUrl?>', 
     post_data = {page_num: page}; 

    $.post(post_link, post_data, function(data){ 
     $('.brandsResult').append(data); 
     $('#loading').hide(); 
    }); 

    $(window).scroll(function (e) { 

     var position_bot = $(window).scrollTop() + $(window).height(), 
      displayed_brands = $('ul.category-list > li').length;    

     // Show loading image if near bottom 
     if(position_bot > $(document).height() - 120 && displayed_brands < total_brands) { 
      $('#loading').show(); 
     } 

     // If page is at the bottom 
     if(position_bot == $(document).height()) { 

      // Increase page number 
      page++; 
      post_data = { page_num: page }; 
      console.log('page', page); 

      // Check if all items are displayed 
      if((page-1) * 5 > total_brands){ 
       $('#loading').hide(); 
      } else {  
      // Firing twice ??? 
       $.post(post_link, post_data, function(data){ 
        $('#loading').hide(); 
        $('.brandsResult').append(data); 
       }); 

      } 

     } 
    }); 
});

来源

2013-04-10 tmartin314

我会设置一个布尔值来控制负载的状态，并告诉该代码不如果是真的做任何事情......

var processing = false; 

if(position_bot == $(document).height() && !processing) { 

    if((page-1) * 5 > total_brands){ 
     $('#loading').hide(); 
     processing = false; 
    } else {  
     processing = true; 
     $.post(post_link, post_data, function(data){ 
      $('#loading').hide(); 
      $('.brandsResult').append(data); 
      processing = false; 
     }); 

    } 
}

我相信这一切的原因$（“＃装载”）。 show（）正在推动屏幕，充当高度的变化，这不足以超越条件的边界。一个简单的布尔值会（或可能）阻止这一点。它可能需要一些调整，这只是一个基本的，完全未经测试的例子。

来源

2013-04-10 17:23:14

谢谢，这实际上有效。你也指出显示加载器实际上也可能是一个问题，但它看起来像是浏览器反弹回来了，它引发了另一个调用。 – tmartin314 2013-04-10 17:35:16

或者您可以尝试加载元素的绝对位置，z-index。例如，如果它是绝对和中心屏幕，它将不会推动屏幕。这当然取决于你的设计。 – 2013-04-10 17:43:18

jQuery无限滚动忽略浏览器反弹

回答

相关问题