Thursday, 18 April 2013


Load Content While Scrolling Page using JQuery

We generally have lots of content to present but can not load all of it at once as it may take too long.

This Ajax auto content loading can very be handy in almost every project.

When we are scrolling down a webpage, the code recognizes that you are at the bottom and auto-loads new content.

<html>
 <head>
 <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
 <script src="http://code.jquery.com/jquery-migrate-1.1.1.min.js"></script>
 <script>
  var scrollInAction = false;
  $(window).scroll(function(){
   console.log($(window).scrollTop() >= ($(document).height() - $(window).height() - 200));
      if  ($(window).scrollTop() >= ($(document).height() - $(window).height() - 200)){
       
       if (scrollInAction)
          {
           return false;
          }else
          {
        scrollInAction=true;
           //do stuff // load of more content here
           yourFunction();

//           scrollInAction=false; // TODO: PUT this scrollInAction=false after ajax loading is completed.
          }
      }
  });
  var index = 0 ;
  function yourFunction(){
   // AJAX Data Loading Logic
   $("#lisitingDiv").append("<div id='subDiv' name='subDiv'><label>Index " + index + "</label></div>");
   $("#lisitingDiv").append("<br/>");
   index = index + 1 ;

   if(index > 500) // 500 is limit after which auto scrolling will be disabled...
   {
    scrollInAction=true;
   }else
   { 
    scrollInAction=false;
   }
  }

  function onLoad(){
   for(i=0;i<25;i++)
   {
    yourFunction();  
   }
  }
 </script>
 <style>
  label {
      -moz-border-bottom-colors: none;
      -moz-border-left-colors: none;
      -moz-border-right-colors: none;
      -moz-border-top-colors: none;
      background-color: #FFFFEC;
      border-color: #EEEECC;
      border-image: none;
      border-style: solid;
      border-width: 0 1px;
      color: #000000;
      font-size: 100%;
      margin: 0;
      padding: 0.25em 27px;
      display: block;
      text-decoration: none;
  }
  #subDiv{
   margin: 3px auto;
      position: relative;
      width: 720px;
  }
 </style>
 </head>
 <body onload="onLoad()">
  <p style="position: fixed;">
   Scroll Down.....
   <br>
   It will scroll till Index 500.
  </p>
     <div id="lisitingDiv" name="lisitingDiv">
     </div>
 </body>
</html>
It helps increasing the initial load speeds of pages faster and users will have to load only the content they see.

4 comments:

  1. You can view this behavior in the facebook and twitter websites. Login to your facebook or twitter account and press End key on your keyboard. You will be able to view the loader as shown in the image.

    https://plus.google.com/108400481090161300810/posts/gR5VgZiDudr

    ReplyDelete
  2. This comment has been removed by the author.

    ReplyDelete
  3. This comment has been removed by the author.

    ReplyDelete

Find me on Facebook! Follow me on Twitter!