Jquery 在滚动页面上加载更多内容'；不要加载第2页

我仍然被困在这个问题上，很抱歉这个问题重叠了。 我正在尝试创建一个产品页面，从第一个页面加载产品。当用户从第二页向下滚动时，需要加载产品。我已经搜索了这个问答网站和许多教程，但我无法让它工作

来自shop.com/category/page1.ajax的产品加载正确，但是当我向下滚动时，我不知道为什么来自shop.com/category/page2.ajax等的产品没有加载

像无限滚动这样的插件不是一个选项

非常感谢您的帮助

JSON/Ajax字符串（因长度而缩小）：

jquery：

<script type="text/javascript">
$(document).ready(function(){

// var pageSize = {{ collection.limit }};
var currentPage = {{ collection.page }};
var collectionPages = {{ collection.pages }};
var category = '{{ collection.internal.url }}';

// Appends the new product to the UI
var appendProduct = function(product, id) {
$('<div class="product"></div>')
.html(product)
 .appendTo($(".productsGrid"));
};

// Load the next products
var loadProducts = function() {

var url = "http://shop.com/"+category+"/page"+currentPage+".ajax";

$.getJSON(url,function(data) {

  console.log(data);
  $.each(data.products, function(index, product) {
    appendProduct('<a href="'+product.url+'" title="'+product.fulltitle+'">' +
                  '<img src="'+product.image+'" width="180" height="150" alt="'+product.fulltitle+'" title="'+product.fulltitle+'"'+'</a>' +
                  '<div class="info"><h3><a href="'+product.url+'" title="'+product.fulltitle+'">'+product.fulltitle+''+'</a></h3>' +
                  '<div class="price">'+product.price.price_money+''+'</div>' +
                  '<div class="gridAddToCart"><a class="button grey" href="'+product.url+'" title="'+product.fulltitle+'" rel="nofollow">'+'<span>{{ 'Details' | t }}</span></a>' +
                  '<div style="margin-top:2px;"></div>' +
                  '<a class="opener button blue" href="http://shop.com/cart/add/'+product.vid+'" title="'+product.fulltitle+'" rel="nofollow"><span>{{ 'Add to cart' | t }}</span></a>'
                 + '<div class="clear"></div>' +
                  '</div><div class="clear"></div></div>'      
    );
  });

  // We're done loading the products, so hide the overlay and update the UI
  $("#overlay").fadeOut();
});
 };

 // First time, directly load the products
 loadProducts();

 // Append a scroll event handler to the container
 $(".productsGrid").scroll(function() {
// We check if we're at the bottom of the scrollcontainer
if ($(this)[0].scrollHeight - $(this).scrollTop() == $(this).outerHeight()) {
  // If we're at the bottom, show the overlay and retrieve the next page

    currentPage++;

  $("#overlay").fadeIn();
  loadProducts();
}
});

});
</script>

$（文档）.ready（函数（）{
//var pageSize={{collection.limit}}；
var currentPage={{collection.page}；
var collectionPages={{collection.pages}}；
var category='{{collection.internal.url}}}'；
//将新产品附加到UI
var appendProduct=功能（产品，id）{
$('')
.html（产品）
。附件（$（“.productsGrid”）；
};
//加载下一个产品
var loadProducts=函数（）{
变量url=”http://shop.com/“+category+”/page“+currentPage+”.ajax”；
$.getJSON（url、函数（数据）{
控制台日志（数据）；
$.each（数据、产品、功能（索引、产品）{
附加产品（“”）+
''+产品.价格.价格+货币''''+''+
'' +
'' +
''
+ '' +
''      
);
});
//我们已经加载完产品，所以隐藏覆盖并更新UI
$（“#覆盖”）.fadeOut（）；
});
};
//第一次，直接加载产品
loadProducts（）；
//将滚动事件处理程序附加到容器
$（“.productsGrid”）.scroll（函数（）{
//我们检查是否在滚动容器的底部
如果（$（此）[0].scrollHeight-$（此）.scrollTop（）==$（此）.outerHeight（））{
//如果我们在底部，显示覆盖图并检索下一页
currentPage++；
$（“#覆盖”）.fadeIn（）；
loadProducts（）；
}
});
});

可能所选元素productsGrid的

滚动功能未启动。你能通知我一下吗？productsGrid是否有滚动条，或者它只是整个页面的一部分？对于整个文档，您可以尝试一种更通用的方法：

在
getJSON
中

 // We're done loading the products, so hide the overlay and update the UI
      $("#overlay").fadeOut();
      $(window).scroll(function() { update(); });  // <-- ADD THIS LINE
    });
  };

// First time, directly load the products
loadProducts();

var update = function() {  // <-- NAME THIS AS FUNCTION
  // activate loadProducts when scrollbar reaches 150 pixels or less from the
  // bottom, instead of having scrolled exactly all the way to the end.
  if($(window).height() + $(window).scrollTop() >= $(document).height() - 150) {

    if(currentPage < collectionPages) {
      // If we're at the bottom, show the overlay and retrieve the next page    
      currentPage++;
      $("#overlay").fadeIn();
      $(window).unbind('scroll');  // <-- ADD THIS LINE
      loadProducts();
    }
  }
};

$(window).scroll(function() { update(); } ); // <-- ADD THIS LINE

//我们已经完成了产品的加载，所以隐藏覆盖并更新UI
$（“#覆盖”）.fadeOut（）；
$（窗口）。滚动（函数（）{update（）；}）；//Thx我完全错过了那个。。。哼！产品现在一直在加载。您知道在到达最后一个产品时停止的方法吗？您的JSON显示属性“pages”，您可以在if语句中使用它来防止加载吗？我不太确定你的应用程序是如何工作的。我想说的是，我不是100%确定如何决定何时停止加载新页面。JSON中有“pages”变量，还有变量
collectionPages
。我不知道他们是否有亲戚关系。如果它们相同，您可以编写类似于
If的内容（currentPage对此错误表示抱歉，我没有真正正确地测试代码。请参阅上面更新的答案。我做了一些进一步的研究，一个解决方案是使用
解除绑定
。我认为代码看起来有点难看，但似乎可以工作。我认为当添加新内容时，页面会自动滚动并触发新的AJAX call，用户不移动页面。因此，我在AJAX调用之前编写了
unbind
，并在添加所有元素时重新绑定滚动条。哦，第1页加载了两次，因为当我将代码复制到注释时，我是手动操作的，并且移动了命令的顺序。
currentPage++
必须在loadProducts之前：(
 // We're done loading the products, so hide the overlay and update the UI
      $("#overlay").fadeOut();
      $(window).scroll(function() { update(); });  // <-- ADD THIS LINE
    });
  };

// First time, directly load the products
loadProducts();

var update = function() {  // <-- NAME THIS AS FUNCTION
  // activate loadProducts when scrollbar reaches 150 pixels or less from the
  // bottom, instead of having scrolled exactly all the way to the end.
  if($(window).height() + $(window).scrollTop() >= $(document).height() - 150) {

    if(currentPage < collectionPages) {
      // If we're at the bottom, show the overlay and retrieve the next page    
      currentPage++;
      $("#overlay").fadeIn();
      $(window).unbind('scroll');  // <-- ADD THIS LINE
      loadProducts();
    }
  }
};

$(window).scroll(function() { update(); } ); // <-- ADD THIS LINE