Adding lazy loading support to our pages

One of the primary aims of responsive design should be the consideration of any tactic we can use to reduce the overall loading time of our pages; this is particularly true for mobile devices.

So far, you've seen how we can preload content. In some instances, this may not be ideal; instead, we can do the opposite and not load content until we are about to view it:

This process is known as lazy loading; it effectively removes the focus of loading the images from the front (that is, on loading of the page) to the point of when we need to see the images. To illustrate the process, we're going to use the bLazy plugin by Bjørn Klinggard, available at http://dinbror.dk/blog/blazy/. The great thing about this library is that it is lightweight and written in pure JavaScript, so has a zero dependency count! Oh and did I forget— it's responsive too.

Let's take a quick look at a demo (based on the original by the author), which...