A plugin used to load assets when they enter the viewport.
All components are built upon the CodyHouse Framework.
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.
- 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 #
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 .media-wrapper utility classes as explained in the Aspect Ratio section.
Background images #
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
<div loading="lazy" data-bg="url(image.jpg)">
<!-- ... -->
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 #
loading="lazy" attribute to the
<picture>. Add a
data-src to each child.
Aspect Ratio #
If you already know the aspect-ratio of your assets, we suggest you add one of the .media-wrapper utility classes to its parent. For example, for a YouTube video (16:9 ratio):
<figure class="media-wrapper bg-contrast-lower">
<iframe loading="lazy" data-src="https://www.youtube.com/embed/zAGVQLHvwOY"></iframe>
For a square size image:
<figure class="media-wrapper media-wrapper--1:1 bg-contrast-lower">
<img loading="lazy" data-src="image.jpg" alt="Img description">
This will prevent the page content from jumping when the asset is loaded.
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
var dynamicAssets = wrapper.querySelectorAll('[loading="lazy"]'); // dynamically added content
Make sure the dynamically added assets have a
loading="lazy" attribute and a
data-srcset (as described in the above sections).
<noscript> tag with the fallback content you want to show and, in CSS, hide the lazy-loaded elements (see demo).
🌅 Demo images:
Bug Report & Feedback
To report a bug or get notified if we update this component, visit the GitHub repository.
If you'd like to suggest new components, visit our components board.