For the example presented here, the infinite scroll will return images similar to what Bing does.

In the sample you will find the "images" folder with about 170 pics.

The models defined that will help with structuring the serverside things :

  •  The Image class - simple class that will hold the name of the file and will override ToString to return relevant html in our context i.e. a html list item
    public class Image
    {
        public string Name { get; set; }

        public Image(string name)
        {
            Name = name;
        }

        public override string ToString()
        {   
            string ret = string.Format(@"<li><img src=""../../images/{0}"" /></li>",Name);
            return ret;
        }
        
    }

 

  • ImageList class - will contain a list of Image objects and also a couple of methods that are used to return specific sets of images.
    public class ImageList
    {
        public List<Image> Images { get; set; }
        public const ushort PageSize = 30; //30 pics , 5 rows
        
        public ImageList(HttpContextBase context)
        {
            Images = new List<Image>();
            DirectoryInfo imagesDirectory = new DirectoryInfo(context.Server.MapPath("~/images"));
            foreach (FileInfo file in imagesDirectory.GetFiles())
            {
                Image img = new Image(Path.GetFileName(file.FullName));
                Images.Add(img);
            }
        }

        public List<Image> GetNextPage(ushort skip)
        {
            List<Image> nextBatch = Images.Skip(skip * PageSize).Take(PageSize).ToList();
            return nextBatch;
        }

        public string GetNextPageStrings(ushort skip)
        {
            List<Image> batch = GetNextPage(skip);
            StringBuilder sb = new StringBuilder();
            foreach (var img in batch)
            {
                sb.Append(img.ToString());
            }
            return sb.ToString();
        }
    }

And that defines mostly our server side models. The controller that will use these classes has the following structure :

 public ActionResult Index()
        {
            ImageList list = new ImageList(HttpContext);
            List<Image> batch = list.GetNextPage(0);
            return View(batch);
        }

        [HttpPost]
        public string GetNextImages(int id)
        {            
            ImageList list = new ImageList(HttpContext);
            return list.GetNextPageStrings((ushort)id);
        }

The interesting part to comment here is the GetNextImages method that is called via jQuery's $.post function.

The client side part of things - its a file named "infinitescroll.js" in the Scripts folder :

var imageLoaderPage = 1;

function ShowPreloader() {
    $('.preloader > img').css('display', 'block');
}
function HidePreloader() {
    $('.preloader > img').css('display', 'none');
}

function GetNextImages() {
    $.post("/Home/GetNextImages",
               {
                   id: imageLoaderPage + 1
               },
           function (imagesList) {
               if (imagesList !== undefined) {
                   HidePreloader();
                   $('#huge-content-wrapper ul').append(imagesList);
                   imageLoaderPage += 1;
               }
           });
}

$(function () {
    $(document).scroll(function () {
        var w = $(window);
        var d = $(document);

        var sum = w.scrollTop() + w.height();
        if (d.height() == sum || d.height() - 1 == sum) {
            ShowPreloader();
            GetNextImages();
        }
    });
})

basically this code binds an event handler to the scroll of the window object and checks if the current "viewport" is at the bootom of the screen. If this is the case, then we make  a call to our method to get more images.

 

Last edited Jul 19, 2012 at 9:08 AM by alexpeta, version 1

Comments

No comments yet.