LazyLoad JS
LazyLoad provides you with a non-jQuery reliant way to ensure the images on your site only load in once they arrive within the viewport, and provides a tonne of customisations options as well.
You might already be aware of the jQuery Lazy Load plugin which works in a very similar way, but this has the added bonus that it works with and without jQuery.
You don’t need to apply it to all of your images either. If you’ve got an image as part of the top part of your template that is always in view then let it load and shine as usual and reserve this implementation method to those hidden down the viewport.
Lets look at how you need to write your HTML.
Markup your images putting the image source inside the data-original attribute.
Specify both width and height attributes so the browser can allocate the space on your page.
<img data-original="/your/image1.jpg" width="100" height="172">
<img data-original="/your/image2.jpg" width="100" height="172">
<img data-original="/your/image3.jpg" width="100" height="172">
Or if you want to use srcset:
<img data-original="/your/image1.jpg"
data-original-set="/your/image1.jpg 1x, /your/[email protected] 2x"
width="100" height="172">
<img data-original="/your/image2.jpg"
data-original-set="/your/image2.jpg 1x, /your/[email protected] 2x"
width="100" height="172">
<img data-original="/your/image3.jpg"
data-original-set="/your/image3.jpg 1x, /your/[email protected] 2x"
width="100" height="172">
Or if you want to use srcset and sizes:
<img data-original="/your/image1.jpg"
data-original-set="/your/image1.jpg 200w, /your/[email protected] 400w"
sizes="(min-width: 20em) 35vw, 100vw">
<img data-original="/your/image2.jpg"
data-original-set="/your/image2.jpg 200x, /your/[email protected] 400w"
sizes="(min-width: 20em) 35vw, 100vw">
<img data-original="/your/image3.jpg"
data-original-set="/your/image3.jpg 200w, /your/[email protected] 400w"
sizes="(min-width: 20em) 35vw, 100vw">
As you can see it works with both standard img tags, srcset and srcset with sizes.
I’ll drop in a code pen shortly to illustrate exactly how you can get this rocking on your website, but for now get going and start building a faster website.
