Load Data while Scrolling Page Down with jQuery
Load Content While Scrolling With jQuery
Now days you can see many web sites loading page data as user scroll down. This is very easy and useful trick to load images as user scroll using Jquery.
Basically we are catching event when scroll is at bottom of the page and in that event calling ajax function to get data from server and load it in required div, area.
I have 10 images in my Image folder (e.g. 1.jpg, 2.jpg …. 10.jpg) and loading 3 images on page load. Now as user scroll down remaining images will be loaded dynamically.
Here is code
Add this code at document load which will catch scroll bar bottom event.
This function use to catch event when scroll bar is at bottom and call function AddImage() to append new images at the bottom of page. We are using simple image count to append new images. You can use ajax call to get any data from server and append it at bottom of page.
This is my code you can modify it as per your requirement
And HTML Page is here, you can see outer div Container in which we have images on load 3 images. div Container is considered as outermost div.
<div id=”Container” style=”width: 80% ;margin:0px auto; border: solid 1px black;“>