How to Implement “Infinite Scroll” in Web Application?

In this blog post, I am going the demonstrate the steps involved in implementing "Infinite Scroll" in web application for loading images just like in Bing and Google image search.

Infinite Scroll – Infinite scroll has been called auto paganize/endless pages. But essentially, it is pre-fetching content from a subsequent page and adding it directly to the user’s current page.

One of the most annoying things when working with large data is how to continuously load the data on demand to your page? The common solution is paging but paging itself will not help too much. You can end up with hundreds or thousands of pages. So a new solution now is on the surface and it's called "Infinite Scroll". It allows you to load chunks of data when you scroll down the page and inject it inside the page, it will load data each time you scroll down on the page.

Step 1

Include jquery library file. You can download the current version of "jquery" library from http://docs.jquery.com/Downloading_jQuery.

<script type="text/javascript"   src="Scripts/jquery-x.x.x.min.js"></script>

Step 2

Add Images folder to the web project which contains images that is loaded at runtime in the website.

Step 3

Add the below designer code to create a list view to load the images initially:

<asp:ListView ID="ListView1" runat="server" EnableModelValidation="True">
        <LayoutTemplate>
            <ul id="itemPlaceholderContainer" runat="server" class="thumb">
                <asp:PlaceHolder runat="server" ID="itemPlaceholder" />
            </ul>
        </LayoutTemplate>
        <ItemTemplate>
             <asp:Image ID="Image1" runat="server" 
             ImageUrl='<%# Eval("image")%>' />
        </ItemTemplate>
</asp:ListView>

Step 4

Fill the list view with images using the below code on Page Load event.

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
         FillListView(48);
    }
}

//Fill images in the list view
private void FillListView(int Rows)
{
     string Imagespath = HttpContext.Current.Server.MapPath("~/Images/");
     string SitePath = HttpContext.Current.Server.MapPath("~");
     //Load image files using linq query
     var Files = (from file in Directory.GetFiles(Imagespath) 
                 select new { image = file.Replace(SitePath, "~/") }).Take(Rows);
      ListView1.DataSource = Files.ToList();
      ListView1.DataBind();
}

Step 5

For now, we have loaded 48 images to the list view. In the next step, we are going to use the script and the code behind to load the next set of images dynamically on scroll down just like in Google and Bing.

Add the below script to the aspxfile:

<script type="text/javascript">
        $(document).ready(function () {
            var Skip = 48; //Number of image to skip
            var Take = 14; //
            function Load(Skip, Take) {
//Post below loader image as progress bar
                $('#divPostsLoader').html('<img src="ProgressBar/ajax-loader.gif">');

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

                        if (data != "") {
                            $('.thumb').append(data.d); //Append the retrieved images next to list view
                        }
                        $('#divPostsLoader').empty();
                    }
               })
            };
            //Larger thumbnail preview 

            //When scroll down, the scroller is at the bottom with the function below 
            //and fire the lastPostFunc function
            $(window).scroll(function () {
                if ($(window).scrollTop() == ($(document).height() - $(window).height())) {
                    Load(Skip, Take);
                    Skip = Skip + 14;
                }
            });
        });
    </script>

Add the below method next to FillListView(). This method will show the next set of images provided number of images to skip and the next set of images to take.

[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.Append(" ");
                GetImages.AppendFormat(string.Format
                     ("<img src='{0}'/>", imageSrc)); GetImages.Append(" ");
            }
            return GetImages.ToString();
        }

Final Code

Default.aspx

<%@ Page Language="C#" 
AutoEventWireup="true" CodeBehind="Default.aspx.cs" 
Inherits="InfiniteScroll.Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Infinite Scroll</title>
    <script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var Skip = 48; //Number of skipped image
            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: "Default.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 with the function below 
            //and fire the lastPostFunc function
            $(window).scroll(function () {
                if ($(window).scrollTop() == ($(document).height() - $(window).height())) {
                    Load(Skip, Take);
                    Skip = Skip + 14;
                }
            });
        });
    </script>
    <style type="text/css">
        img { border:"none"; margin:"auto"}
        .container { padding:"2px"; }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <div class="header">
            <div class="title">
                <h1>
                    Infinite Scroll Example
                </h1>
            </div>
        </div>
        <div>
            <asp:ListView ID="ListView1" 
            runat="server" EnableModelValidation="True">
                <LayoutTemplate>
                    <ul id="itemPlaceholderContainer" 
                    runat="server" class="thumb">
                        <asp:PlaceHolder runat="server" 
                        ID="itemPlaceholder" />
                    </ul>
                </LayoutTemplate>
                <ItemTemplate>
                    <asp:Image ID="Image1" 
                    runat="server" 
                    ImageUrl='<%# Eval("image")%>' />
                </ItemTemplate>
            </asp:ListView>
            <div style="margin-left: auto; 
            margin-right: auto; width: 120px;" id="divPostsLoader">
            </div>
        </div>
    </div>
    </form>
</body>
</html>

Default.aspx.cs

using System;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Text;
using System.IO;
namespace InfiniteScroll
{
    public partial class Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                Fill_List(48);
            }
        }

        private void Fill_List(int Rows)
        {
            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, "~/") }).Take(Rows);
            ListView1.DataSource = Files.ToList();
            ListView1.DataBind();
        }
        [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.Append(" ");
                GetImages.AppendFormat(string.Format("<img src='{0}'/>", imageSrc)); 
                                       GetImages.Append(" ");
            }
            return GetImages.ToString();
        }
    }
}

This post provides just an introduction (basics) on the usage of "Infinite Scroll" feature. However, the likes (immense potential) of which we have already seen in "Facebook updates", "Flip kart item search" and "Bing and Google image search", etc.

References

• http://www.infinite-scroll.com/
• http://jquery.com/
• http://code.msdn.microsoft.com/Infinite-Scroll-Like-Bing-bc05262b#content