Time for action – lazy loading images

Perform the following steps to create a page of images that load the correct resolution only when needed:

1. We'll get started by creating a basic HTML document and associated files and folders just like we did in Chapter 1, Designer, Meet jQuery. Inside the body of the HTML document, we'll add a series of images using the new HTML5 figure and figcaption elements, as shown in the following code:

   <figure>
     <img src="images/loading.gif" />
     <figcaption>
       <a href="http://www.public-domain-image.com/wallpapers-public-domain-images-pictures/a-bench-for-resting.jpg.html" title="A bench for resting">A bench for resting</a> by Steve Hillebrand, U.S. Fish and Wildlife Service
     </figcaption>
   </figure>

   Note that we've used a small, animated .gif image as a placeholder rather than the image we actually want to display. We'll be replacing this later with the actual image. You'll want to add at least four or five images to...