Load Data while Scrolling Page Down with jQuery in ASP.NET

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.

$(window).scroll(function() {
    if ($(window).scrollTop() == $(document).height() -$(window).height()) {
       AddImage();
    }

});

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

var ImageID = 3;
function AddImage() {  // Give an Ajax call to load data dynamically 
    if (ImageID == 10)
       ImageID = 1;
    ImageID = ImageID + 1;
    var imageName = ImageID + “.jpg”;
    var temp = “<div class=’tmpl’><img src=’/Content/Images/” + imageName + “‘ style=’height: 400px;’ /></div>”;
    $(“#Container).append(temp);

}

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;“>
    <divclass=”tmpl”>
        <imgsrc=”~/Content/Images/1.jpg” style=”height: 400px;/>
    </div>
    <divclass=”tmpl”>
        <imgsrc=”~/Content/Images/2.jpg” style=”height: 400px;/></div>
    <divclass=”tmpl”>
        <imgsrc=”~/Content/Images/3.jpg” style=”height: 400px;/></div>

</div>

 

One more example on same using Jquery Template

Advertisements
This entry was posted in jQuery, MVC and tagged , . Bookmark the permalink.

7 Responses to Load Data while Scrolling Page Down with jQuery in ASP.NET

  1. I like this blog it’s a master piece! Glad I discovered this on google.

  2. Len Labrum says:

    Very interesting information!Perfect just what I was looking for! “I have a hundred times wished that one could resign life as an officer resigns a commission.” by Robert Burns.

  3. I was looking through some of your content on this internet site and I think this web site is real instructive! Keep on putting up.

  4. Del Froats says:

    It is actually a nice and useful piece of info. I’m glad that you just shared this helpful info with us. Please stay us up to date like this. Thank you for sharing.

  5. Merely wanna admit that this is very beneficial , Thanks for taking your time to write this.

  6. Very interesting information!Perfect just what I was looking for!

  7. Pingback: Load Data while Scrolling Page Down with jQuery in ASP.NET MVC | stick2basic

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s