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.


    • 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.


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

    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;">
  • iFrame
    <div class="embed-responsive embed-responsive-16by9">
    	<iframe class="embed-responsive-item lazy" width="560" height="315" data-src="" allowfullscreen></iframe>
  • 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' />

Last Modified: June 30, 2020