Lazy Loading

To ensure maximum performance, all images (including backgrounds) are loaded in a deferred way. This speeds up page loading times and decreases traffic by only loading content that is currently in view.

Markup: Images

To take advantage of this feature, use the special markup for your images. Instead of putting the image source URL in the standard src attribute, put it in data-src as shown in the following example:

<div class="lazy-wrapper">
  <div class="lazy">
    <img
      src="#"
      data-src="img/assets/projects/project2/img-cover-2.jpg"
      width="1920"
      height="1280"
      alt=""
    />
  </div>
</div>

TIP

To minimize page reflow events, it’s recommended that you always specify the width and height of the image. Using these explicitly set dimensions, the script will calculate the correct wrapper width and height so your images will not jump when they are being loaded.

Markup: Backgrounds

For background images, use the lazy-bg class with the path to a background image in data-src:

<img class="of-cover lazy-bg" src="#" data-src="img/assets/section/sectionImage/img-1.jpg" alt=""/>