Please don't forget to read Usage part of each element.
Lazy load principle allows to only load assets (images) when needed, when your section or content is visible within the user's viewport.
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.
cannot be used together
Not inside, not around the image.
Because equalizer is not triggered after image is loaded.
Even if you put a
, images are still downloaded. It's recommanded to use [data-lazy]
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
attribute name, use
Each time you add image element to the page, you have to use this JS function
CONTEXT refers to document or html element parent.