Lazy Loading

Easily LazyLoad Images, iFrames, Background Images or HTML5 Videos to make your Pages load faster than ever for your Website’s Visitors.

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

    <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
    <div class="section lazy" data-bg="image.jpg" style="background-position: center center; background-repeat: no-repeat; background-size: cover;">
    	...
    </div>
  • iFrame
    <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
    <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>

Last Modified: June 30, 2020