当用户滚动到页面底部时使用jQuery .load（）

Question

我正在使用jQuery load（）在用户滚动到页面底部时加载更多内容。这是我的脚本。

$(window).scroll(function() { 
    if ($(window).scrollTop() >= $(document).height() - $(window).height()) { 
     var visible_posts = $('.post').length - 1; 
     $(".posts").append('<div class="more-content-'+ visible_posts + '"></div>'); 
     $(".more-content-" + visible_posts).html('<div class="loading"><img src="/img/loading.gif" alt="" />'); 
     $(".more-content-" + visible_posts).load('<?php bloginfo('template_directory'); ?>/ajax/get_posts.php?offset=' + visible_posts); 
    } 
}); 

的问题是，如果用户滚动太快这创造怪异的行为，许多装载的Gif ..我想是因为它与追加装载的div股利负载所做的每每次条件满足之前也。

的问题是：

有没有在第一次执行后停止脚本的一种方式..运行负荷（）...然后重新启用该功能？当您想要禁用太快的点击时，点击与解除绑定类似的点击。

有什么想法？

Answer 1

如何在加载完成后重新启用该功能？

var canLoad = true; 
$(window).scroll(function() { 
    if ($(window).scrollTop() >= $(document).height() - $(window).height() && canLoad) { 
     canLoad = false; 
     // other stuff 
     $(".more-content").load('stuff', function() { 
      // re-enable scroll function 
      canLoad = true; 
     }); 
    } 
}); 

Answer 2

设置一个标志，一旦你开始加载新页面，并取消它一旦页面已经更新..

var loadingMore = false; 
$(window).scroll(function() { 
    if (!loadingMore && 
     $(window).scrollTop() >= $(document).height() - $(window).height()) { 

     loadingMore = true; 

     var visible_posts = $('.post').length - 1; 
     $(".posts").append('<div class="more-content-'+ visible_posts + '"></div>'); 
     $(".more-content-" + visible_posts).html('<div class="loading"><img src="/img/loading.gif" alt="" />'); 
     $(".more-content-" + visible_posts) 
      .load('<?php bloginfo('template_directory'); ?>/ajax/get_posts.php?offset=' + visible_posts, 
        function(){loadingMore = false;} 
       ); 
    } 
}); 

的是要注意重要的是，它不只是的div出现多次，你实际上是做多的AJAX请求..

Answer 3

试试这个

var flag = true; 
$(window).scroll(function() { 
    if ($(window).scrollTop() >= $(document).height() - $(window).height()) { 
     if(flag){ 
      flag = false; 
      var visible_posts = $('.post').length - 1; 
      $(".posts").append('<div class="more-content-'+ visible_posts + '"></div>'); 
      $(".more-content-" + visible_posts).html('<div class="loading"><img src="/img/loading.gif" alt="" />'); 
      $(".more-content-" + visible_posts).load('<?php bloginfo('template_directory'); ?>/ajax/get_posts.php?offset=' + visible_posts, function(){ 
      flag = true 
      }); 
     } 
    } 
}); 

Answer 4

这应该工作，我还添加了评论来帮助你：

$(window).scroll(function() { 
    var bload = 1; // Add a boolean var 
    if ($(window).scrollTop() >= $(document).height() - $(window).height() && bload) { 
     // Check in the condition to see if we load 
     bload = 0; // Set the boolean to false or zero, so that we don't load anything else until the var is true again 
     var visible_posts = $('.post').length - 1; 
     $(".posts").append('<div class="more-content-'+ visible_posts + '"></div>'); 
     $(".more-content-" + visible_posts).html('<div class="loading"><img src="/img/loading.gif" alt="" />'); 
     $(".more-content-" + visible_posts).load('<?php bloginfo('template_directory'); ?>/ajax/get_posts.php?offset=' + visible_posts, function() { 
      bload = 1; // This gets fired when the load is done, so we can load again (we set the bool to true) 
     }); 
    } 
});