# Lazy Loading
To ensure maximum performance of the template all the images (including backgrounds) are loaded in deferred way. It speeds up the page loading times and decreases traffic to your users by only loading the content which is currently in view.
# Markup: Images
To take advantage of this feature you should use the special markup for your images. Instead of putting image source URL to standard
src attribute, put it in
data-src like 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>
To minimize page reflow events, it’s recommended that you always specify
height of the image. Using those 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
lazy-bg class with the path to a background image in
<img class="of-cover lazy-bg" src="#" data-src="img/assets/section/sectionImage/img-1.jpg" alt=""/>