Lazy loading images

Imagine you want to build a responsive page with many big, gorgeous images. What are the things you need to consider to be sure that the page is as flexible and optimized as possible? First, it would be nice if we only loaded the images when needed; if a page has twenty large images but a site visitor never scrolls down the page to see more than the first two or three of them, why load all twenty? Second, it would be great if we could load high-resolution images for those who use retina displays to ensure that the images look as clear and crisp as possible.

There are a few proposals in the works within the upcoming HTML5 specification that will build some of this functionality into HTML. At the time of writing this book, nothing has been decided for sure, though many different solutions have been proposed. In the meantime, we can build websites that address these issues with jQuery, using the Unveil plugin from Luís Almeida.

Tip

It's important that this is one case where...