In this short tutorial, I am going to narrate on how you can lazy load images in a ASP.Net MVC 4 page. In most of todays social media sites, we often come across lots and lots of images which kill most of the bandwidth unnecessarily. So keeping to optimize the rendering of images only ON DEMAND would be a good solution in both bandwidth optimization and performance perspectives.
In the code below, I am going to demonstrate on how to create a specific Route Handler in ASP.Net MVC 4, which returns an instance of HttpHandler. HttpHandler is going to serve image to the client browser, but to make client browser not to understand actual image URL, we have used Route Handler. Later we use JQuery LazyLoad plugin to get images only on demand i.e., only on focus. We have wide range of effects and different configuration on LazyLoad plugin, but I am settling for simple fade effect for making this tutorial simple and elegant.