🎉 Black Friday deal! 25% off your first year of CodyHouse Pro →

Projects

Progress value is 30%

Lazy Load

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

Copy: View demo

Dependencies

All components are built upon the CodyHouse Framework.

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 .media-wrapper 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 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>
</figure>

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">
</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:

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.

✅ Project duplicated

✅ Project created

There was an error while trying to export your project. Please try again or contact us