Question

我正在使用以下脚本通过点击按钮加载下一个帖子：

  jQuery('#showMore').click(function(event) {
       if (jQuery('#loader1').length) {
        jQuery('#loader1').hide();
       }
      jQuery('#showMore').text('Loading..');
      jQuery('#showMore').after('<img src="/wp-content/plugins/store/images/co/ajax-loader.gif" id="loader1">');
      if (jQuery('#no-more').length) {
       jQuery('#no-more').remove();
       }
         event.preventDefault();
         $number = jQuery('#product_grid li').length;

        jQuery.ajax({
           type: "POST",
           url: "/wp-content/plugins/store/ajax_more.php",
           data: "count=" + jQuery('#product_grid li').size(),
           success: function(results){
             jQuery('#product_grid').append(results);
             jQuery('#showMore').text('View More Products');
             jQuery('#loader1').hide();
           }
         });

  });

现在，我希望脚本在滚动时加载下一个帖子而不是单击按钮。有没有办法做到这一点？

Answer 1

使用jQuery（window）.scroll事件。

示例：

jQuery(window).scroll(function(){
   // existing stuff
});

您可以根据scrollTop属性控制加载数据回调。表示当前$ .ajax请求根据滚动量调用时。

Answer 2

$(window).unbind(‘scroll’);  
if($(window).scrollTop() == $(document).height() - $(window).height()) {  
  //send request based on your cursor if more data available.  
}

在滚动上加载下一篇文章 - 像无限滚动一样

2 个答案: