JQuery

Load Data on Scroll Using jQuery

Introduction
 
This article explains how to load data on demand or load data when the user scrolls. Here we will do this in a simple manner, I hope you enjoy it.
 
Please see this article in my blog here 
 
Background
 
A few days ago one of my colleagues asked me how to load data into the UL when we do scroll. I could help him on that time itself. But here I am writing this article for his future reference. In this way we can do this very easily. 
 
Using the code
 
Since we will load the data on a scroll, we need to fire the window events. So I suggest include a jQuery plugin in your page as in the following:
  1. <script src="jquery-2.1.4.min.js"></script>  
Once you are done, you are ready to go!
 
Our next step is load some initial or static data.
  1. <div id="myScroll">  
  2.         <p>  
  3.             Contents will load here!!!.<br />  
  4.         </p>  
  5.         <p >Life treats you in the same way, how you treat your life.Follow your passion, be prepared, don't let anyone limit your dreams. My Passion towards my life !!! - See more at: http://sibeeshpassion.com/ </p>  
  6.         <p >Life treats you in the same way, how you treat your life.Follow your passion, be prepared, don't let anyone limit your dreams. My Passion towards my life !!! - See more at: http://sibeeshpassion.com/ </p>  
  7.         <p >Life treats you in the same way, how you treat your life.Follow your passion, be prepared, don't let anyone limit your dreams. My Passion towards my life !!! - See more at: http://sibeeshpassion.com/ </p>  
  8.         <p >Life treats you in the same way, how you treat your life.Follow your passion, be prepared, don't let anyone limit your dreams. My Passion towards my life !!! - See more at: http://sibeeshpassion.com/ </p>  
  9.         <p >Life treats you in the same way, how you treat your life.Follow your passion, be prepared, don't let anyone limit your dreams. My Passion towards my life !!! - See more at: http://sibeeshpassion.com/ </p>  
  10.         <p >Life treats you in the same way, how you treat your life.Follow your passion, be prepared, don't let anyone limit your dreams. My Passion towards my life !!! - See more at: http://sibeeshpassion.com/ </p>  
  11.         <p >Life treats you in the same way, how you treat your life.Follow your passion, be prepared, don't let anyone limit your dreams. My Passion towards my life !!! - See more at: http://sibeeshpassion.com/ </p>  
  12.         <p >Life treats you in the same way, how you treat your life.Follow your passion, be prepared, don't let anyone limit your dreams. My Passion towards my life !!! - See more at: http://sibeeshpassion.com/ </p>  
  13.         <p >Life treats you in the same way, how you treat your life.Follow your passion, be prepared, don't let anyone limit your dreams. My Passion towards my life !!! - See more at: http://sibeeshpassion.com/ </p>  
  14.         <p >Life treats you in the same way, how you treat your life.Follow your passion, be prepared, don't let anyone limit your dreams. My Passion towards my life !!! - See more at: http://sibeeshpassion.com/ </p>  
  15.         <p >Life treats you in the same way, how you treat your life.Follow your passion, be prepared, don't let anyone limit your dreams. My Passion towards my life !!! - See more at: http://sibeeshpassion.com/ </p>  
  16.         <p >Life treats you in the same way, how you treat your life.Follow your passion, be prepared, don't let anyone limit your dreams. My Passion towards my life !!! - See more at: http://sibeeshpassion.com/ </p>  
  17.         <p >Life treats you in the same way, how you treat your life.Follow your passion, be prepared, don't let anyone limit your dreams. My Passion towards my life !!! - See more at: http://sibeeshpassion.com/ </p>  
  18.         <p >Life treats you in the same way, how you treat your life.Follow your passion, be prepared, don't let anyone limit your dreams. My Passion towards my life !!! - See more at: http://sibeeshpassion.com/ </p>  
  19.         <p >Life treats you in the same way, how you treat your life.Follow your passion, be prepared, don't let anyone limit your dreams. My Passion towards my life !!! - See more at: http://sibeeshpassion.com/ </p>  
  20.         <p >Life treats you in the same way, how you treat your life.Follow your passion, be prepared, don't let anyone limit your dreams. My Passion towards my life !!! - See more at: http://sibeeshpassion.com/ </p>  
  21.         <p >Life treats you in the same way, how you treat your life.Follow your passion, be prepared, don't let anyone limit your dreams. My Passion towards my life !!! - See more at: http://sibeeshpassion.com/ </p>  
  22.         <p >Life treats you in the same way, how you treat your life.Follow your passion, be prepared, don't let anyone limit your dreams. My Passion towards my life !!! - See more at: http://sibeeshpassion.com/ </p>  
  23.         <p >Life treats you in the same way, how you treat your life.Follow your passion, be prepared, don't let anyone limit your dreams. My Passion towards my life !!! - See more at: http://sibeeshpassion.com/ </p>  
  24.         <p >Life treats you in the same way, how you treat your life.Follow your passion, be prepared, don't let anyone limit your dreams. My Passion towards my life !!! - See more at: http://sibeeshpassion.com/ </p>  
  25.         <p >Life treats you in the same way, how you treat your life.Follow your passion, be prepared, don't let anyone limit your dreams. My Passion towards my life !!! - See more at: http://sibeeshpassion.com/ </p>  
  26.         <p >Life treats you in the same way, how you treat your life.Follow your passion, be prepared, don't let anyone limit your dreams. My Passion towards my life !!! - See more at: http://sibeeshpassion.com/ </p>  
  27.     </div>  
Now we need some styles, right?
  1. <style>  
  2.         #myScroll {  
  3.             border: 1px solid #999;  
  4.         }  
  5.   
  6.         p {  
  7.             border: 1px solid #ccc;  
  8.             padding: 5px;  
  9.             text-align: center;  
  10.         }  
  11.   
  12.         .loading {  
  13.             color: red;  
  14.         }  
  15.         .dynamic {  
  16.             background-color:#ccc;  
  17.             color:#000;  
  18.         }  
  19.     </style>  
What is next? Shall we run it and see our page now?
 
 
 
So now we have loaded the static data. Now it is time to fire the scroll event. 
  1. $(window).scroll(function () {  
  2.            if ($(window).scrollTop() == $(document).height() - $(window).height()) {  
  3.                appendData();  
  4.            }  
  5.        });  
In the preceding code, I am calling the scroll event  and when  the condition $(window).scrollTop() == $(document).height() - $(window).height() 
is satisfied, I am calling a function. You can see the function below.
  1. function appendData() {  
  2.            var html = '';  
  3.            for (i = 0; i < 10; i++) {  
  4.                html += '<p class="dynamic">Dynamic Data : Life treats you in the same way, how you treat your life.Follow your passion, be prepared, do not let anyone limit your dreams. My Passion towards my life !!! - See more at:<a href="http://sibeeshpassion.com/">http://sibeeshpassion.com/</a> </p>';  
  5.            }  
  6.            $('#myScroll').append(html);  
  7.        }  
Here I am populating 10 records dynamically and appending the created data to our main element. Once you are done, you can see the output as in the following.
 
 
 
Complete Code 
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title>Load data on demand demo - Sibeesh Passion</title>  
  5.     <script src="jquery-2.1.4.min.js"></script>  
  6.     <style>  
  7.         #myScroll {  
  8.             border: 1px solid #999;  
  9.         }  
  10.   
  11.         p {  
  12.             border: 1px solid #ccc;  
  13.             padding: 5px;  
  14.             text-align: center;  
  15.         }  
  16.   
  17.         .loading {  
  18.             color: red;  
  19.         }  
  20.         .dynamic {  
  21.             background-color:#ccc;  
  22.             color:#000;  
  23.         }  
  24.     </style>  
  25.     <script>  
  26.         $(window).scroll(function () {  
  27.             if ($(window).scrollTop() == $(document).height() - $(window).height()) {  
  28.                 appendData();  
  29.             }  
  30.         });  
  31.         function appendData() {  
  32.             var html = '';  
  33.             for (i = 0; i < 10; i++) {  
  34.                 html += '<p class="dynamic">Dynamic Data : Life treats you in the same way, how you treat your life.Follow your passion, be prepared, do not let anyone limit your dreams. My Passion towards my life !!! - See more at:<a href="http://sibeeshpassion.com/">http://sibeeshpassion.com/</a> </p>';  
  35.             }  
  36.             $('#myScroll').append(html);  
  37.         }  
  38.     </script>  
  39. </head>  
  40. <body>  
  41.     <div id="myScroll">  
  42.         <p>  
  43.             Contents will load here!!!.<br />  
  44.         </p>  
  45.         <p >Life treats you in the same way, how you treat your life.Follow your passion, be prepared, don't let anyone limit your dreams. My Passion towards my life !!! - See more at: http://sibeeshpassion.com/ </p>  
  46.         <p >Life treats you in the same way, how you treat your life.Follow your passion, be prepared, don't let anyone limit your dreams. My Passion towards my life !!! - See more at: http://sibeeshpassion.com/ </p>  
  47.         <p >Life treats you in the same way, how you treat your life.Follow your passion, be prepared, don't let anyone limit your dreams. My Passion towards my life !!! - See more at: http://sibeeshpassion.com/ </p>  
  48.         <p >Life treats you in the same way, how you treat your life.Follow your passion, be prepared, don't let anyone limit your dreams. My Passion towards my life !!! - See more at: http://sibeeshpassion.com/ </p>  
  49.         <p >Life treats you in the same way, how you treat your life.Follow your passion, be prepared, don't let anyone limit your dreams. My Passion towards my life !!! - See more at: http://sibeeshpassion.com/ </p>  
  50.         <p >Life treats you in the same way, how you treat your life.Follow your passion, be prepared, don't let anyone limit your dreams. My Passion towards my life !!! - See more at: http://sibeeshpassion.com/ </p>  
  51.         <p >Life treats you in the same way, how you treat your life.Follow your passion, be prepared, don't let anyone limit your dreams. My Passion towards my life !!! - See more at: http://sibeeshpassion.com/ </p>  
  52.         <p >Life treats you in the same way, how you treat your life.Follow your passion, be prepared, don't let anyone limit your dreams. My Passion towards my life !!! - See more at: http://sibeeshpassion.com/ </p>  
  53.         <p >Life treats you in the same way, how you treat your life.Follow your passion, be prepared, don't let anyone limit your dreams. My Passion towards my life !!! - See more at: http://sibeeshpassion.com/ </p>  
  54.         <p >Life treats you in the same way, how you treat your life.Follow your passion, be prepared, don't let anyone limit your dreams. My Passion towards my life !!! - See more at: http://sibeeshpassion.com/ </p>  
  55.         <p >Life treats you in the same way, how you treat your life.Follow your passion, be prepared, don't let anyone limit your dreams. My Passion towards my life !!! - See more at: http://sibeeshpassion.com/ </p>  
  56.         <p >Life treats you in the same way, how you treat your life.Follow your passion, be prepared, don't let anyone limit your dreams. My Passion towards my life !!! - See more at: http://sibeeshpassion.com/ </p>  
  57.         <p >Life treats you in the same way, how you treat your life.Follow your passion, be prepared, don't let anyone limit your dreams. My Passion towards my life !!! - See more at: http://sibeeshpassion.com/ </p>  
  58.         <p >Life treats you in the same way, how you treat your life.Follow your passion, be prepared, don't let anyone limit your dreams. My Passion towards my life !!! - See more at: http://sibeeshpassion.com/ </p>  
  59.         <p >Life treats you in the same way, how you treat your life.Follow your passion, be prepared, don't let anyone limit your dreams. My Passion towards my life !!! - See more at: http://sibeeshpassion.com/ </p>  
  60.         <p >Life treats you in the same way, how you treat your life.Follow your passion, be prepared, don't let anyone limit your dreams. My Passion towards my life !!! - See more at: http://sibeeshpassion.com/ </p>  
  61.         <p >Life treats you in the same way, how you treat your life.Follow your passion, be prepared, don't let anyone limit your dreams. My Passion towards my life !!! - See more at: http://sibeeshpassion.com/ </p>  
  62.         <p >Life treats you in the same way, how you treat your life.Follow your passion, be prepared, don't let anyone limit your dreams. My Passion towards my life !!! - See more at: http://sibeeshpassion.com/ </p>  
  63.         <p >Life treats you in the same way, how you treat your life.Follow your passion, be prepared, don't let anyone limit your dreams. My Passion towards my life !!! - See more at: http://sibeeshpassion.com/ </p>  
  64.         <p >Life treats you in the same way, how you treat your life.Follow your passion, be prepared, don't let anyone limit your dreams. My Passion towards my life !!! - See more at: http://sibeeshpassion.com/ </p>  
  65.         <p >Life treats you in the same way, how you treat your life.Follow your passion, be prepared, don't let anyone limit your dreams. My Passion towards my life !!! - See more at: http://sibeeshpassion.com/ </p>  
  66.         <p >Life treats you in the same way, how you treat your life.Follow your passion, be prepared, don't let anyone limit your dreams. My Passion towards my life !!! - See more at: http://sibeeshpassion.com/ </p>  
  67.     </div>  
  68. </body>  
  69. </html>  

Conclusion

Please download the source code for more details. I hope you liked this article. Now please share your thoughts and suggestions. It matters a lot. 

Kindest Regards.

Up Next
    Ebook Download
    View all
    Learn
    View all
    Get Started

    You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

    Become a sharper developer and jumpstart your career.

    Basic

    $0

    $

    . 00

    monthly

    For Basic members:

    • Standard Profile
    • Access learning courses
    • Access free e-books
    • 1x point
    Premium

    $20

    $

    . 00

    monthly

    For Premium members:

    • Earn 2x reward points
    • Premium profile with Verified check
    • Premium Avatar with status update
    • Learning courses
    • Unlimited Certifications and badges on profile
    • Unlimited Book downloads
    • Access to Premium content
    • Online Training
    • Unlimited PDF conversions and downloads
    • Professional Resume Writing
    • Interview Preparations Guide
    • 25 messages per month
    • 1 "Kodzu" avatar, basic
    Elite

    $45

    $

    . 00

    monthly

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs