Load content progressively when user scrolls the page

Introduction

Laymen explanation

If anytime, you had lots of content to present but can not load all of it at once as it may take too long, then this write-up helps.

Technical explanation

When we are scrolling down a webpage, the code recognizes that you are at the bottom and auto-loads new content.It helps increasing the initial load speeds of pages faster and users will have to load only the content they see.

Implementation using AJAX and JQuery

jscroll plugin(http://jscroll.com/) helps to load content using AJAX based on user scroll of the page.

jScroll is a jQuery plugin for infinite scrolling, written by Philip Klauzinski. Infinite scrolling; also known as lazy loading, endless scrolling, autopager, endless pages, etc.; is the ability to load content via AJAX within the current page or content area as you scroll down. The new content can be loaded automatically each time you scroll to the end of the existing content, or it can be triggered to load by clicking a navigation link at the end of the existing content.

https://www.sanwebe.com/2013/05/auto-load-records-on-page-scroll provides the approach to use auto fetch MySQL record based on user scroll.

Reference

https://www.sanwebe.com/2013/05/auto-load-records-on-page-scroll

http://stackoverflow.com/questions/13237555/jquery-load-content-when-scroll-to-bottom-100px-of-page-multiple-events-fired

http://webresourcesdepot.com/load-content-while-scrolling-with-jquery/

http://stackoverflow.com/questions/5020351/how-to-load-the-web-page-content-based-on-user-scrolling

http://jscroll.com/