CODEWITHSUNDEEP
javascriptjqueryhtml
Learning
Learning

Reputation: 20001

Load data on page scroll doesnt bot work perfectly

I am working on page where it will load news when it will reach to the end of page.

 $(window).scroll(function () {
    if ($(window).scrollTop() >= $(document).height() - $(window).height() -50) {
        //if ($(window).scrollTop() >= $(document).height() - 100) {
        //alert("I am loading");
        GetRecords();
    }
  });

Problem withe the above code it that it send multiple request to the server as i have mentione >= in the if condition i tried few thing but it doesnt seem to work properlt.

When i use == operation and $(window).scrollTop() == $(document).height() - $(window).height() it works fine on desktop but it doesn't trigger in mobile version.

I have header & footer in the page which i event didn't hide for troubleshooting but it still doesn't work properly

Anything which i can do to fix this issue

Upvotes: 0

Views: 29

Answers (1)

Alexis
Alexis

Reputation: 5831

I did the same thing and i was facing the same problem.

What i did is create a boolean isLoading and pass it to true when request is send and only when you get the response then change the value to false.

After that add your variable in your scroll position test.

Example

var isLoading = false;   

$(window).scroll(function(e){
  var maxHeight = $(document).height();
  var position = $(this).scrollTop() + $(window).height();
  if(position >= (maxHeight - 50) && !isLoading)
  {
    loadArticles();
    isLoading = true;
  }
});

function loadArticles() {
    loadData()
    .then(data => {
      //some code here
      isLoading = false;
    });
}

Demo link of my draft

Upvotes: 1

Related Questions