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

Published: 25 August 2012
on channel: Adam Khoury

138,115

1.1k

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.

On this page of the site you can watch the video online Javascript Scroll Tutorial Load Dynamic Content Into Page When User Reaches Bottom Ajax with a duration of hours minute second in good quality, which was uploaded by the user Adam Khoury 25 August 2012, share the link with friends and acquaintances, this video has already been watched 138,115 times on youtube and it was liked by 1.1 thousand viewers. Enjoy your viewing!

1,614