Infinite Scroll images Like Bing and Google

Introduction

One of the must annoying thing when working with large data is how to loading this data to your page?

The common solution is paging but paging itself will not help too much you can end with hundred or thousands of page numbers.So new solution now is on the surface and it’s called “Infinite Scroll”.Infinite Scroll allow you to load chunk of data when you scroll down of the page and inject it inside the page, it will load data each time you scrolling down on the page.

Note:Before you start you can download code from here ( Please do not forget to rate it)

Infinite Scroll images Like Bing and Google

Demo

(Click on the image to see the result)

Description

As I told you in the introduction Infinite Scroll is becoming more and more popular it’s in everywhere starting with Bing,Google,Facebook,Twitter,Linkedin.etc.

The idea of infinite scrolling is so simple and it can be summarized in the following diagram which is part of Scott Hanselmen Article

Infinite Scroll WebSites via AutoPagerize – Hacky, but the beginning of something cool

My Sample will show you how to Display a list of images like Bing and Google but this is not the only thing,you can take the advantage of idea behind infinite scrolling and implement the same concept everywhere.

The following code snippet will be called when you scroll to the last of the page

[WebMethod]
public static string LoadImages(int Skip, int Take)
{
System.Threading.Thread.Sleep(2000);
StringBuilder GetImages = new StringBuilder();
string Imagespath = HttpContext.Current.Server.MapPath("~/Images/");
string SitePath = HttpContext.Current.Server.MapPath("~");
var Files = (from file in Directory.GetFiles(Imagespath) select new { image = file.Replace(SitePath, "") }).Skip(Skip).Take(Take);
foreach (var file in Files)
{
var imageSrc = file.image.Replace("\\","/").Substring(1); //Remove First '/' from image path
GetImages.AppendFormat("<a>");
GetImages.AppendFormat("<li>");
GetImages.AppendFormat(string.Format("<img src='{0}'>", imageSrc));
GetImages.AppendFormat("</li>");
GetImages.AppendFormat("</a>");

}
return GetImages.ToString();
}

VB.Net part

<WebMethod()> _
Public Shared Function LoadImages(Skip As Integer, Take As Integer) As String
System.Threading.Thread.Sleep(2000)
Dim GetImages As New StringBuilder()
Dim Imagespath As String = HttpContext.Current.Server.MapPath("~/Images/")
Dim SitePath As String = HttpContext.Current.Server.MapPath("~")
Dim Files = (From file In Directory.GetFiles(Imagespath) Select New With { _
Key .image = file.Replace(SitePath, "") _
}).Skip(Skip).Take(Take)
For Each file As Object In Files

Dim imageSrc = file.image.Replace("\", "/").Substring(1) 'Remove First '/' from image path
GetImages.AppendFormat("<a>")
GetImages.AppendFormat("<li>")
GetImages.AppendFormat(String.Format("<img src='{0}'/>", imageSrc))
GetImages.AppendFormat("</li>")
GetImages.AppendFormat("</a>")
Next
Return GetImages.ToString()
End Function

JavaScript part

$(document).ready(function () {
var Skip = 49; //Number of skipped row
var Take = 14; //
function Load(Skip, Take) {
$('#divPostsLoader').html('<img src="ProgressBar/ajax-loader.gif">');

//send a query to server side to present new content
$.ajax({
type: "POST",
url: "Grid.aspx/LoadImages",
data: "{ Skip:" + Skip + ", Take:" + Take + " }",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {

if (data != "") {
$('.thumb').append(data.d);
}
$('#divPostsLoader').empty();
}

})
};
//Larger thumbnail preview

//When scroll down, the scroller is at the bottom and fire the Load ()function
$(window).scroll(function () {

if ($(window).scrollTop() == $(document).height() - $(window).height()) {
Load(Skip, Take);

//Any number you want
Skip = Skip + 14;
}
});
})

Summery :

Infinite scroll is every where now ,this sample show give good starting point.It’s not only loading images you can load any thing you want start from images,text data and even load pages inside the page.

I hopefully you like the sample and really appreciate your comments and feedback
.

Regards.