1

I am trying to load more items on-scroll. The code works and the user reaches the bottom of the page. Every time the user scrolls to the bottom of the page, 9 items are loaded.

The issue appears when I try to load 9 items before the user reaches the bottom of the page. Then wait for those items to be loaded and then check again the condition (currentScroll >= goal).

At this point as soon as the condition is TRUE (currentScroll >= goal) all items are loaded at once. I am guessing that this is happening because the currentScroll variable keeps counting while scrolling and the first group of items has not been yet loaded. As a result the $(document).height() is still the same, which affect the goal variable: var goal = $(document).height() - $(window).height();

I tried to use a while loop (see the commented section at my code) but the code crashes.

Is there any way to make the program wait for the group of items (9 items) to be loaded when the condition is TRUE and then check again?


$(window).scroll(function() {

    var currentScroll = $(window).scrollTop();


   var goal = $(document).height() - $(window).height(); // Bottom of the page
   
   goal = goal*0.5; // Load more items before reach bottom of the page
   
   // The following parts check if all the items are loaded. That works!!
   var result_count = document.getElementsByClassName('yacht-count')[0].innerHTML

      total_results_to_show = group_of_villas_showed*results_to_show;
      
      
      if(result_count/total_results_to_show<=1){
          goal = currentScroll*2;
          console.log("Finish");
      }
   
   // Check if the current scroll is greater than the setted goal
    if (currentScroll >= goal){
            console.log("start loading villas");
            ajaxGet(guests_value,destinations_value,sort_by,current_page);
            current_page++;
            group_of_villas_showed+=1;
            console.log("loading villas");
    }
    
    // With the use of this Loop program crashes
    /*
    while(currentScroll >= goal){
        goal = $(document).height() - $(window).height();
        var currentScroll = $(window).scrollTop();
        goal = goal*0.5;
    }
    */
    
});


ajaxGet = (guests_value,destinations_value,sort_by,page, replace = false) => {
     $.ajax({
       type: 'GET',
       url: ajax_url,
       data: {
         guests: guests_value,
         destination: destinations_value,
         sort_by: sort_by,
         page:page,
       },
       dataType: 'json',
       beforeSend: function(){
         $('#loading-image').removeClass('hide');
         $('.yachts-search-page').addClass('loading-more');
       },
       success: function (data) {
         //console.log('ajax success');
         $('.yachts-search-page').removeClass('loading-more');
         $('#loading-image').addClass('hide');
         if(replace){
           $('body .load-more-wrapper').show();
           $('body .yachts-inner').html(data.content);
           current_page = 1;
         }
         else
           $('body .yachts-inner').append(data.content);

         $('body .yacht-count').text(data.yacht_count);
         newQueryString(guests_value,destinations_value,sort_by,page);
       },
       error: function(data){
         //console.log('error wtf');
       }
     });
   }
react_or_angluar
  • 1,568
  • 2
  • 13
  • 20
george
  • 19
  • 4
  • 1
    I'd remove the loop and try throttling or debouncing your scroll event function. That could potentially solve your issue, since it sounds like it could be related to your scroll event over-firing. You might also want to check page position at the beginning of your function and return null if the condition is not met to prevent any additional operations from occurring. Twitter ran into major performance issues years ago due to not debouncing or throttling their scroll event. – Jay Kariesch Dec 19 '20 at 00:08
  • It could be almost anything. Testing code changes is much easier in a jsfiddle or a runnable script. Does this help? https://stackoverflow.com/questions/10662528/load-ajax-when-scroll-reaches-80 or https://stackoverflow.com/questions/13237555/jquery-load-content-when-scroll-to-bottom-100px-of-page-multiple-events-fired or https://stackoverflow.com/questions/13057910/load-more-content-when-user-scrolls-near-bottom-of-page – react_or_angluar Dec 19 '20 at 00:56

1 Answers1

0

I found a solution thanks to Jay Kariesch's comment on this site. I used _.throttle which checks if the condition is TRUE every 300ms which is enough for the next group of villas to be loaded.

Thank you so much for your replies guys. You were extremely helpful!!

This is my working code now:

$(document).ready(function(){
        
        
        
      // Check every 300ms the scroll position
      $(document).on('scroll', _.throttle(function(){
        check_if_needs_more_content();
      }, 300));
    
      function check_if_needs_more_content() {     
        pixelsFromWindowBottomToBottom = 0 + $(document).height() - $(window).scrollTop() -$(window).height();
        

      
      // Check if all the items are loaded.
      var result_count = document.getElementsByClassName('yacht-count')[0].innerHTML

      total_results_to_show = group_of_villas_showed*results_to_show;
      
      //console.log("results_to_show",results_to_show);
      console.log("total_results_to_show",total_results_to_show);
      console.log("result_count",result_count);
      
      if(result_count/total_results_to_show<=1){
          finish_check=1;
          console.log("Finish");
      }
      else
        finish_check=0;
        

        //Items load condition
        if ((pixelsFromWindowBottomToBottom < 500)&&(finish_check==0)){
          //console.log("start loading villas");
          ajaxGet(guests_value,destinations_value,sort_by,current_page);
          current_page++;
          group_of_villas_showed+=1;
        }
      }
    });
george
  • 19
  • 4