Load more data ajax PHP onscroll

Question

I am working on loading around 1000 products on a page and thought of following approach of OnScroll loading.

Below is the approach i am following:

<ul id="productContainer">
</ul>

JQuery:

$(document).ready(function() {
   var track_load = 0; //total loaded record group(s)
   var loading  = false; //to prevents multipal ajax loads
   var total_groups = 5;
   $('#productContainer').load("loadmore", 
    {'group_no':track_load}, function() {track_load++;});
   $(window).scroll(function() {
     if($(window).scrollTop() + $(window).height() == 
      $(document).height()) {
        if(track_load <= total_groups && loading==false){
           loading=true;
            $.post('store/loadmore',{'group_no': track_load}, 
            function(data){
               $("#productContainer").append(data).fadeIn(); 
               track_load++; //loaded group increment
               loading = false;
            });
        }
     }
   });
});

PHP

$items_per_group = 25;
$get_total_rows = /*count from SQL table*/
$total_groups = ceil($get_total_rows/$items_per_group);

if(isset($_POST)){
      $group_number = filter_var($_POST["group_no"], 
       FILTER_SANITIZE_NUMBER_INT, FILTER_FLAG_STRIP_HIGH);

       if(!is_numeric($group_number)){
        header('HTTP/1.1 500 Invalid number!');
        exit();
       }

       $position = ($group_number * $items_per_group);
       /*PHP Query*/
}

This solution is working pretty well but has following issues:

Products are loaded only when user scrolls to complete end of the page - But needed thing is that as soon as user reaches last element of current view then next products shall be loaded.
After scrolling complete bottom of page first time and then i user scroll up then also, AJAX call is fired.

How can i prevent these issues and then i will have great solution.

I tried below solution also:

if($(window).scrollTop() + $(window).height() == 
      $(document).height()-`200[height of footer]`) {}

Second solution

var end = $("#copyright").offset().top;<br/>
  var viewEnd = $(window).scrollTop() + $(window).height();<br/>
  var distance = end - viewEnd;<br/>
  if(distance <400{load products ajax}

But none of it seems working as expected

whomsoever downvoted.. please leave a comment. It is no good to downvote without any reason — Gags, Oct 29 '15 at 11:28

score 1 · Answer 1 · edited May 23 '17 at 11:59

1

Here is the basic concept of checking if an element is visible within a scrollable container: http://jsfiddle.net/7fpqcqw1/

window.elementInView = false;
function isScrolledIntoView(elem) {
    var $elem = $(elem);
    var $window = $(window);

    var docViewTop = $window.scrollTop();
    var docViewBottom = docViewTop + $window.height();

    var elemTop = $elem.offset().top;
    var elemBottom = elemTop + $elem.height();

    window.elementInView = ((elemBottom <= docViewBottom) && (elemTop >= docViewTop)) ? true : false;

    return window.elementInView;
}

Use the window.elementInView variable whereever you call isScrolledIntoView(elem) with a condition to return true only once and not calling the function anymore.

This function is provided by another user in another stack overflow question: Check if element is visible after scrolling

edited May 23 '17 at 11:59

Community

1
1

answered Oct 28 '15 at 15:21

ggzone

3,465
7
34
58

I have tried this and this works pretty well and solved the issue of loading products while first scroll instead of reaching end of the page. Approach i have followed is to embed a hidden `input` with some ID and margin from top say 300px. Is this right approach??? – Gags Oct 29 '15 at 03:36
Secondly, it still have the issues that if a person refreshes the page or already at bottom of page then if he scroll up then ajax request is fired again and products are loaded. How can i prevent this? – Gags Oct 29 '15 at 03:38
1) just try 2) page refresh thing can only be done server side. cache the ajax loaded stuff and set a var, so you can have a condition around the scroll script. 2.1) save the function return value into a window var an set it to true if the function returns true. wrap the function call with a condition of the window var, so its only fired once. All these are just examples. – ggzone Oct 29 '15 at 14:08
Can you just illustrate one example to get bettr understsnding. – Gags Oct 29 '15 at 15:23

Load more data ajax PHP onscroll

1 Answers1