Question

I have added an ajax loader to my code below. The problem is when the data from database is over, still the scroll function is going to an infinite loop and also the ajax scroll image is displayed. I want to stop the scroll function once the data is finished and also disable the ajax loader image. THis is my code

var counter=25;
$(window).on('scroll',function(){
  if($(window).scrollTop()==($(document).height()-$(window).height())){
$('div#lastPostsLoader').html('<img src="loading-icon.gif">');
     //Get older posts
    $.ajax({
        type: 'POST',
        url: 'getdata.php?start_row=' + counter,
        success: function(oldposts){
        if(oldposts)
        {
            //Append #postsDiv
            $('#data').append(oldposts);
            counter += 15;
        }
           else
        {

            $('#lastPostsLoader').hide();
        }
        }
    });
  } 
});

Answer 1

Try with this:

var counter = 25;
$(window).on('scroll', function () {
  if ($(window).scrollTop() == ($(document).height() - $(window).height())) {
     $(document).ajaxStart(function() {
        $('div#lastPostsLoader').html('<img src="loading-icon.gif">'); 
     });
    $.ajax({
      type: 'POST',
      url: 'getdata.php?start_row=' + counter,
      success: function (oldposts) {
        if ($('#data')) {
          $('#data').append(oldposts);
          counter += 15;
        }
      }
    });
    $(document).ajaxComplete(function() {
       $('div#lastPostsLoader').find('img[src^="loading"]').remove();
    });
  }
});