Images Lazy Loading

To ensure maximum performance of your page, all the images (including backgrounds) are loaded in a deferred way. This speeds up page loading times and decreases traffic for your users by only loading the content in view.

To take advantage of this feature, you should use 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">
  <img data-src="img/assets/project5/img-5-3.jpg" width="960" height="960" src="#" alt=""/>
</div>

TIP

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

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

<div class="lazy-bg" data-src="img/assets/projects/bg-5.jpg"></div>