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. }
  6. p {
  7. border: 1px solid #ccc;
  8. padding: 5px;
  9. text-align: center;
  10. }
  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. }
  11. p {
  12. border: 1px solid #ccc;
  13. padding: 5px;
  14. text-align: center;
  15. }
  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.