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

Markup: Images

<div class="lazy">
  <img data-src="img/assets/project5/img-5-3.jpg" width="960" height="960" src="#" alt=""/>
</div>

Markup: Backgrounds

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