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/image1@2x.jpg 2x" 
     width="100" height="172">
<img data-original="/your/image2.jpg" 
     data-original-set="/your/image2.jpg 1x, /your/image2@2x.jpg 2x" 
     width="100" height="172">
<img data-original="/your/image3.jpg" 
     data-original-set="/your/image3.jpg 1x, /your/image3@2x.jpg 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/image1@2x.jpg 400w" 
     sizes="(min-width: 20em) 35vw, 100vw">
<img data-original="/your/image2.jpg" 
     data-original-set="/your/image2.jpg 200x, /your/image2@2x.jpg 400w" 
     sizes="(min-width: 20em) 35vw, 100vw">
<img data-original="/your/image3.jpg" 
     data-original-set="/your/image3.jpg 200w, /your/image3@2x.jpg 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.

  • Resource Name

    LazyLoad JS

  • Resource Creator

    Andrea Verlicchi

Description

LazyLoad is a fast, lightweight and flexible script for loading images only when they’re about to enter the viewport of a scrollable area, which supports the srcset attribute and with and takes best advantage from the progressive JPEG image format (which is good for performance).

View on Github Download Resource

Subscribe to our Newsletter

Add your email address and receive an email every Friday covering off everything worth knowing about building your websites responsively.