AMSOL e-Tutor

PHP AJAX load content on scroll like facebook

We assume you have basic understanding of AJAX, you can learn the basics in the tutorial PHP AJAX Basic Understanding

In this tutorial we will learn to implement On Scroll content loading, just like you have exprienced in Facebook, to improve the loading performance, facebook does not load the whole content, since it consumes time and data. When you open facebook it loads few of the posts, but as soon as scroll down it automatically loads more content, users even never feel this.

In below lines we are going to start learning.

1- A div container for content, and a div for showing message, you can exmept showing message div if you don't want any delay, but in slow internet speed areas, it is better to show message to engage the user with you.

	<div id="DivContents"> </div>
	<div id="DivMessage"> </div>
	

2- A jquery based AJAX call which calls and loads the content. Let us explain the code line by line

1st line is the jquery ready function, it makes sure the script runs after the whole content of page loads.

$(document).ready(function(){

Line 2,3 and 4: variable declaration for storing values for limit, start and action values. limit will tell the script how much items to be shown in each loading. start will tell from where loading start, since each loading load 7 items, it will ensure next 7 items to be loaded thus avoiding duplicates. whereas active variable keeps track of loading status, script will come to know whether it is time to load new content or not.

	var limit = 7;
	var start = 0;
	var action = 'inactive';

Line 5 will start most important function which is responsible of loading content, function is keyword and part of the function declaring syntax, next is function name get_content_on_scroll, and two parameters are supplied which are limit and start.

	 function get_content_on_scroll(limit, start){

Line 6 where ajax method of jquery is called

	$.ajax({

Line 7 to 11 are parameters required for .ajax method, 1 parameter is url, which is php script the request will be sent to, semi colon (,) is separator used between parameters

2nd parameter is method, where post is used, you can use get method as well.

3rd parameter is data limit and start keys are supplied and limit and start variable are supplied.

4th is cache, false is given, to turn off cache.

5th is success and data is given to it for processing

	url:"fbload_db.php",
    method:"POST",
    data:{limit:limit, start:start},
    cache:false,
    success:function(data)
	{

In case of success, function will append data in DivContents div.

    $('#DivContents').append(data);

Further are closing lines, detail is comments below .

}           //success parameter closed
  });       //ajax method closed
 }          //function get_content_on_scroll closed

In next lines, it checks for existense of data and shows relevant message.

    if(data == '')
    {
     $('#DivMessage').html("No Data Found");
     action = 'active';
    }
    else
    {
     $('#DivMessage').html("Fetching Data .... Please Wait....");
     action = "inactive";
    }
	

Next step is to execute the script first time of page load, AJAx script checks the action variable, if it is inactive, then it will mark it as active and calls the get_content_on_scroll function which will get and append the data.

if(action == 'inactive'){
  action = 'active';
  get_content_on_scroll(limit, start);
 }

Executing script on scroll, in this step script will call the get_content_on_scroll function and load the content, it will check 2 conditions, 1st is to check if you reached bottom of the page and 2nd is action variable value to avoid repeated calls to the function.

setTimeout function makes sure the get_content_on_scroll will called after 1 seconds (3000 mili seconds) after user reaches bottom of screen while scroll. If you don't want any delay you can decrease it to 0 or any value.

In this tutorial we have made it 3 seconds, just to show you the notable delay.

 $(window).scroll(function(){
  if($(window).scrollTop() + $(window).height() > $("#DivContents").height() && action == 'inactive')
  {
   action = 'active';
   start = start + limit;
   setTimeout(function(){
    get_content_on_scroll(limit, start);
   }, 1000);
  }
 });

Hope you have learned AJAX based on scroll content loading like facebook in PHP, you can download example code here