Javascript Scroll Tutorial Load Dynamic Content Into Page When User Reaches Bottom Ajax




Lesson Code: http://www.developphp.com/video/JavaScript/Scroll-Load-Dynamic-Content-When-User-Reach-Bottom-Ajax
Learn to make dynamic page content appear only when user scrolls down to the bottom of your page content using Javascript. We are using the onscroll event for the window object and several DOM properties to create the functionality. *object.offsetHeight – *window.pageYOffset – *window.innerHeight. It serves as a smart way for dynamic websites to load only the data required to fill the window, then load more as the user scrolls down the page.

You can see this effect if you have a Facebook account and you scroll down your timeline. Facebook executes new Ajax requests each time you scroll to the bottom of the page content, to load in more data to the page magically with Ajax. This way they do not have to load a lot of data to the page initially, and only spend dynamic data loading energy if the user scrolls down the page to see more and more data. Other large scale dynamic websites also use this approach to achieve efficient database data rendering in a smart modern way.

Original source


29 responses to “Javascript Scroll Tutorial Load Dynamic Content Into Page When User Reaches Bottom Ajax”

  1. what if the content isnt blue box? I actually have more data to show, but when the page just loaded i only want to show the first 10 items, as you scroll down you can see all 50 items.

  2. Thanks dude, the tutorial was great but how to load different content each time like lazyload images when users hit the bottom? the ajax cannot be the same all the time, is there anything need to be down on the server side?

  3. If someone knows, pleas explain the "ajax call to get more dynamic data goes here" part. I am struggling with it for more than a week… Or, even better, if someone can put a finished source of this tutorial video. Thanks 🙂

Leave a Reply