Lazy Scroll loading in Ajax call

I have fetched users data from a wordpress site using ajax call like this:

$.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>');
    }

  }

I am appending each data dynamically. I have lot of data here “http://…./wordpress/wp-json/wp/v2/users“. I want only 6 rows initially and if i scroll down it should load another 6 rows. I dont want to use jquery plugin. Overall what i want is lazy scroll loading without any plugin.

Read more here: Lazy Scroll loading in Ajax call

Leave a Reply

Your email address will not be published. Required fields are marked *