Lazy Loading

Getting Started

• Activating Lazy Loading

  Simply add the .lazy Class to activate Lazy Loading on that Element.

  Types:

  • data-src – Used for Images, iFrames, HTML5 Videos
  • data-bg – Used for Background Images

• Image

  Copy

  <img class="lazy" data-src="image.jpg" alt="Image">

• Image with an SVG Placeholder

  Add an SVG Placeholder to the Image to avoid Page Jumps when the Images are Lazy Loaded.

  Example:

  Copy

  <img decoding="async" loading="lazy" class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 3'%3E%3C/svg%3E" width="800" height="600" data-src="image.jpg" alt="Image">

  Note:

  Pay attention to this viewBox='0 0 4 3' Code in the SVG. This should be replaced with your Image’s Aspect Ratio. Also make sure that the width="800" and height="600" defined for your Image, matches the Aspect Ratio and is more than the actual Image Size. This will ensure that there are no warnings on Google.

• Background Image

  Copy

  <div class="section lazy" data-bg="image.jpg" style="background-position: center center; background-repeat: no-repeat; background-size: cover;">
  	...
  </div>

• iFrame

  Copy

  <div class="embed-responsive embed-responsive-16by9">
  	<iframe class="embed-responsive-item lazy" width="560" height="315" data-src="https://www.youtube.com/embed/SZEflIVnhH8" allowfullscreen></iframe>
  </div>

• HTML5 Videos

  Copy

  <video class="lazy d-block w-100" data-poster="images/videos/explore-poster.jpg" preload="auto" controls>
  	<source data-src='images/videos/explore.webm' type='video/webm' />
  	<source data-src='images/videos/explore.mp4' type='video/mp4' />
  </video>