I've recently learned the basics of SQL, Ajax and (object oriented) PHP, which I've put to use by creating a user build feed of information. However, at present the feed only loads the 20 most recent posts in the database (since loading all of them at once would have a negative impact on the page load time).
I've decided that trying to implement a system of infinite-scrolling (similar the method used by Twitter and Facebook) would be the best solution to this problem, but I'm not entirely sure how to do this.
I know that the first thing I need is a function to tell whether the user has reached the bottom of the page. To do this, I've written the following simple JQuery:
$(window).scroll(function() {
var scrollBottom = $(document).height() - $(document).scrollTop() - $(window).height();
if(scrollBottom < 200) {
// send Ajax request
}
});
This bit of code should work, but I am concerned about the risk of multiple Ajax requests being sent to the server if the user scroll multiple times before the feed of posts has been updated.
I gather that the next thing I need to do is send off an Ajax request. Naturally, the script which currently retrieves the first 20 posts in the database uses a line of php/SQL looking like
$query = "SELECT * FROM table DESC LIMIT 0,20";
I'm guessing that I need to replace this with something like
$query = "SELECT * FROM table DESC LIMIT " . $x . "," . $x+20;
and then create another script which keeps track of how many times the Ajax request has been sent off, and use this to determine the variable $x to ensure the correct results are fetched.
Finally I know I'd need to create some sort of callback function to display the posts that had been fetched.
Is this the correct (best) method to use to create a system of infinite scrolling? Also, how can I alter the jQuery to stop multiple requests being sent off?
