Javascript Ajax调用中的延迟滚动加载

我使用ajax调用从wordpress站点获取用户数据，如下所示：

$.ajax({
  url:"http://..../wordpress/wp-json/wp/v2/users",
  type: 'GET',
  dataType: 'JSON',
  data: {limit: 6, order: 'asc'}, 
  success : function(data){
    for(i=0; i < data.length; i++){
    $('div.about-us').append('<div class="col-md-4 single-grid '+data[i].id+'" onclick="myFunction(\'' + data[i] + '\')"><div class="col-md-11 text-center"><img src="'+data[i].profileImage+'"><h4>'+data[i].name+'</h4><strong>'+data[i].job_title+'</strong></div></div>');
    }

  }

var scrollLimit = 500;  // Amount after which ajax() call initializes
var limit       = 3;    // item count
var offset      = 6;    // offset
$(window).on('scroll', function() {
    scrollPosition = $(this).scrollTop();
    if (scrollPosition >= scrollLimit)
    {   
        loadContent(limit, offset);  // loadContent method in which ajax() call is defined

        // Update values on each scroll
        scrollLimit = scrollLimit + 500;
        offset  = offset + 3;
    }
});

data : {per_page:6, page:page_no}

$.ajax({
url:“http://..../wordpress/wp-json/wp/v2/users",
键入：“GET”，
数据类型：“JSON”，
数据：{限制：6，顺序：'asc'}，
成功：功能（数据）{
对于（i=0；i'+data[i].job_title+''）；
}
}

---

我正在动态添加每个数据。我这里有很多数据“”。我最初只需要6行，如果我向下滚动，它应该会加载另外6行。我不想使用jquery插件。总的来说，我想要的是在没有任何插件的情况下延迟滚动加载。

使用类似以下内容：

$.ajax({
  url:"http://..../wordpress/wp-json/wp/v2/users",
  type: 'GET',
  dataType: 'JSON',
  data: {limit: 6, order: 'asc'}, 
  success : function(data){
    for(i=0; i < data.length; i++){
    $('div.about-us').append('<div class="col-md-4 single-grid '+data[i].id+'" onclick="myFunction(\'' + data[i] + '\')"><div class="col-md-11 text-center"><img src="'+data[i].profileImage+'"><h4>'+data[i].name+'</h4><strong>'+data[i].job_title+'</strong></div></div>');
    }

  }

var scrollLimit = 500;  // Amount after which ajax() call initializes
var limit       = 3;    // item count
var offset      = 6;    // offset
$(window).on('scroll', function() {
    scrollPosition = $(this).scrollTop();
    if (scrollPosition >= scrollLimit)
    {   
        loadContent(limit, offset);  // loadContent method in which ajax() call is defined

        // Update values on each scroll
        scrollLimit = scrollLimit + 500;
        offset  = offset + 3;
    }
});

data : {per_page:6, page:page_no}

---

取而代之的是限制：6尝试如下：

$.ajax({
  url:"http://..../wordpress/wp-json/wp/v2/users",
  type: 'GET',
  dataType: 'JSON',
  data: {limit: 6, order: 'asc'}, 
  success : function(data){
    for(i=0; i < data.length; i++){
    $('div.about-us').append('<div class="col-md-4 single-grid '+data[i].id+'" onclick="myFunction(\'' + data[i] + '\')"><div class="col-md-11 text-center"><img src="'+data[i].profileImage+'"><h4>'+data[i].name+'</h4><strong>'+data[i].job_title+'</strong></div></div>');
    }

  }

var scrollLimit = 500;  // Amount after which ajax() call initializes
var limit       = 3;    // item count
var offset      = 6;    // offset
$(window).on('scroll', function() {
    scrollPosition = $(this).scrollTop();
    if (scrollPosition >= scrollLimit)
    {   
        loadContent(limit, offset);  // loadContent method in which ajax() call is defined

        // Update values on each scroll
        scrollLimit = scrollLimit + 500;
        offset  = offset + 3;
    }
});

data : {per_page:6, page:page_no}

---

解决了我的问题。谢谢

即使我将限制指定为6，它也会给我所有的行。然后在查询中在服务器端解决问题。@swapnilpatty您必须在服务器端发送

limit，offset

值，并在带有限制和偏移的查询中使用此值