So, we include lazyload.js in the footer of the page, and then we call
lazyload();. I’ve modified my copy of the lazyload.js script to include this in the bottom of the file, so that it gets called right after it loads, but it could also be called in the footer of the page like so:
Now we need to adjust the image markup we’re using. We apply a class of
lazyload to each
<img>, and move the URL of the image file from the
src attribute to a new attribute called
data-src. It will now look something like this:
<img class="lazyload" data-src="banana-tree.jpg" alt="A banana tree.">
By moving the image source from the
src attribute to a
data- attribute, we prevent the browser from downloading the image file, and then the lazy load script will move the image URL from the
data- attribute to the
src attribute, triggering a download.
We really only want to set this up for images that are, pardon my language, but, below the fold. Images that are seen by the user as the page loads should not use a lazy loading technique, as the browser default works just fine! For my photo page, I started applying the lazy loading technique on the third image.
<noscript> tag. Like so:
<img src="walnut-tree.jpg" alt="A walnut tree.">
What we’ve got now is a fairly bare-bones lazy loading setup, but it works quite well. If I were to add a hundred photos to the page, only the first two would load by default, and the user would only download the photos that they scrolled down to. This is a fantastic relief for anyone who is on a data plan, especially if they land on the page without knowing what they are about to do. Small improvements like lazy loading can have a huge impact.