Go to rebrand

Lazy load

This is a general LazyLoad that can be used to lazy load images, videos, iFrames or scripts.

- Images, videos and background images will be loaded as the user scrolls.

- Iframes and scripts will be loaded on window load event (iframes will depend some times if they are inside a modal or not)

Make sure to include the JS into your page or project:

<script src="{{ static("js/ca_styleguide_lazyload.js") }}"></script>

You need to include the CSS also. You can choose between including a very tiny CSS:

<link rel="stylesheet" type="text/css" media="all" href="{{ static('css/ca_styleguide_lazyload.css') }}" />

Or just include the styles into your CSS:

.lazy-load{opacity:0}.lazy-load.loaded{opacity:1}.lazy-load.fadein{transition:all 1s ease-out}

Images

To set up for an image all you need to do is change the image src tag to be data-src and add class="lazy-load fadein" (If you want to avoid the fade-in transition, you can remove the fadein class).

If you have a srcset of images, all you need to do is add the data-srcset and data-sizes to the image tag.

When the window.load event is fired all images will have the src, srcset and sizes attributes replaced with the data-scr="", data-srcset="", data-sizes="" values.

If you are using the data-srcset attribute, make sure that your image has defined sizes, being it on the image tag or by CSS, otherwise Safari misbehaves.




HTML5 Videos

To lazy-load HTML5 videos with autoplay, you need to add class="lazy-load fadein" to the video element, and change each of the video sources src tag to be data-src.

<video autoplay loop class="lazy-load fadein"> <source data-src="/videourl.mp4" type="video/mp4" /> <source data-src="/videourl.webm" type="video/webm" /> </video>


Iframes

To lazy load an iframe in the easy way it's just a matter of adding the data-src attribute and lazy-load class

To use on an iFrame that is loading inside a modal you need to have the include data-activate-iframe="iFrame-ID"

When the window.load event is fired all links that include the data-activate-iframe will have a click handler applied that will load replace the src of the iframe with the data-src.

(It should load the styleguide index)

<iframe data-src="/your-url/" id="iframe1"></iframe> <button data-activate-iframe="iframe1">Trigger</button>

As an alternative, if there is a data-link on the button it will override the data-scr. This is to make this backwards compatible

(It should load the icons page)

<iframe data-src="/ignored-url/" id="iframe2"></iframe> <button data-activate-iframe="iframe2" data-link="/overriding-url/">Trigger</button>


Background images

  • Assistive technology cannot parse background images. If the image contains information critical to understanding the page's overall purpose, it is better to describe it semantically in the document.

To lazy-load a CSS background image, you need to add a bg-lazy-load class to the element. When the window.load event is fired, a new class will be added: js-lazy-loaded.

As a final step, either you can:

CSS implementation

Into your CSS, make sure to include the background-image property nested into the js-lazy-loaded classname, so the browser will request the image only after the window is loaded and it will not stop the render of the page.

Example:

.your-class-name { background-repeat: repeat-x; background-size: cover; } .your-class-name.js-lazy-loaded { background-image: url(/static/img/image.jpg); }

JS only implementation

Add the background image url in a data-src attribute. The script will add the background image as an inlined style attribute.

<div class="bg-lazy-load" data-src="/static/img/exampleimage1.jpg"></div>



JavaScript files

To lazy-load a JS file and its execution, you need to add a lazy-load class to the script-element. When the window.load event is fired, src attribute will be copied from data-src and js code will be loaded actually only after page loaded with no blocking.

Example:

<script class="lazy-load" data-src="/static/js/v2_homepage.js"></script>

Adding a delay to load JavaScript files

To delay a JavaScript file load, you need to add the data-delay attribute to the script tag.

Example:

<script class="lazy-load" data-delay="5000" data-src="/static/js/v2_homepage.js"></script>


Force lazy-load execution

When you have content loaded by ajax or built on javascript, you can force the lazy-load execution dispatching a 'com.consumeraffairs.sitecore.contentReload' custom event.

var evObj = document.createEvent('Events'); evObj.initEvent('com.consumeraffairs.sitecore.contentReload', true, false); window.dispatchEvent(evObj);

Click the button to create dynamic content and force lazy.load