Lazy Load

A plugin used to load assets when they enter the viewport.

How to

The Lazy Load plugin is used to load only assets inside the viewport, reducing initial page weight and server requests. It works for inline images, videos, iframes, and background images.

It uses:

• native lazy-loading for browsers supporting it;
• Intersection Observer (as a native lazy-loading fallback);
• scroll/resize events for older browsers (e.g., IE11).

Inline images #

Add the loading="lazy" attribute to your inline image. Set a data-src equal to the path of the image you want to load. You can optionally set an src equal to a fallback image.

<img loading="lazy" data-src="image.jpg" alt="Img description" src="placeholder.svg">

For responsive images, you can add a data-srcset with the list of your assets.

If you already know the aspect-ratio of your image, consider using one of the aspect-ratio utility classes as explained in the Aspect Ratio section.

Background images #

Add a loading="lazy" attribute to the element that has an image background. Set a data-bg equal to the path of the image you want to load, making sure to include the url(...) syntax.

<div loading="lazy" data-bg="url(image.jpg)">
  <!-- ... -->
</div>

You don't need to add a background-image in your css file (the plugin will set it as inline style).

Video and Iframe #

As for inline images, add a loading="lazy" and a data-src equal to the path of the video/iframe you want to load.

<iframe loading="lazy" data-src="https://www.youtube.com/embed/8NLRhaSnQS0"></iframe>

Picture element #

Add a loading="lazy" attribute to the <picture>. Add a data-srcset/data-src to each child.

<picture loading="lazy"> 
  <source
    media="(min-width: 650px)"
    data-srcset="image-1.jpg" /> 
  <source
    media="(min-width: 465px)" 
    data-srcset="image-2.jpg" />
  <img 
    data-src="image-3.jpg" />
</picture>

Aspect Ratio #

If you already know the aspect-ratio of your assets, we suggest adding one of the aspect-ratio utility classes to its parent. For example, for a YouTube video (16:9 ratio):

<figure class="aspect-ratio-16:9 bg-contrast-lower">
  <iframe loading="lazy" data-src="https://www.youtube.com/embed/zAGVQLHvwOY"></iframe>
</figure>

For a square size image:

<figure class="aspect-ratio-1:1 bg-contrast-lower">
  <img loading="lazy" data-src="image.jpg" alt="Img description">
</figure>

This will prevent the page content from jumping when the asset is loaded.

Threshold #

By default, lazy-loading assets are loaded when they are 200px below the viewport. You change this value adding to the asset a data-threshold equal to the new value. You can use either px or %.

Dynamically added assets #

You can lazy load assets that are dynamically added to the page using the LazyLoad object.

var dynamicAssets = wrapper.querySelectorAll('[loading="lazy"]'); // dynamically added content
new LazyLoad(dynamicAssets);

Make sure the dynamically added assets have a loading="lazy" attribute and a data-src/data-srcset (as described in the above sections).

No JavaScript #

Lazy-loading works only if JavaScript is enabled. To provide no-js support, make sure to add, for each of your assets, a <noscript> tag with the fallback content you want to show and, in CSS, hide the lazy-loaded elements (see demo).

Assets #

🌅 Demo images:

• Photo by Charles on Unsplash
• Photo by Kate Stone Matheson on Unsplash
• Photo by Bonnie Kittle on Unsplash
• Photo by Jamie Street on Unsplash
• Photo by Mikhail Vasilyev on Unsplash
• Photo by Bao Menglong on Unsplash
• Photo by Jorge Zapata on Unsplash

Categories

• Plugins > Misc

Bug report & feedback

Component Github page ↗