Important information:

Using the Design System implies following some rules: the code should be valid and same as the Design System. Meaning custom HTML & CSS override are forbidden.
Please don't forget to read Usage part of each element.

Lazyload

Lazy load principle allows to only load assets (images) when needed, when your section or content is visible within the user's viewport.

last modified: 17/03/2022 12:00:04

Lazy load should be added on all images except on the first section of the page as they should be directly loaded and visible.

You are able to implement it on classic elements <img src="xxx"> or on data-interchange elements.

src to data-src

The src of you image will be a default 1px transparent base64 encoded GIF to prevent a broken image element. Your real image will be then link into the data-src attribute.

data-src and jsrs-resizerContainer / jsrs-resizerPart cannot be used together

Not inside, not around the image.
Because equalizer is not triggered after image is loaded.

Performance

Even if you put a hide-for-small-only or show-for-medium-up , images are still downloaded. It's recommanded to use [data-lazy] .

How to avoid jump effect

Prefer to use preset image dimensions to avoid jump on loading page.

Preset image dimensions

You can also use a different kind of base64, where you can preset a height and width to prevent the jumping images when they are loaded.

data-interchange to data-lazy

Interchange uses media queries to dynamically load responsive content. This way you'll only load larger resources for devices that can handle it.

Instead of using Zurb Foundation's data-interchange attribute name, use data-lazy .

For background

For image

JavaScript

How to trigger the js

Each time you add image element to the page, you have to use this JS function inception.lazyLoad.reflow(CONTEXT);

CONTEXT refers to document or html element parent.