Lazyload Images

What is Lazyload ?

LazyLoad is a fast, lightweight and flexible script that speeds up your web application.
Loading images only as they enter the viewport. LazyLoad supports responsive images.

Before Loaded

After Loaded

              
                <img class="img-fluid lazy" src="../../assets/img/assets/lazy-empty.png" data-src="../../assets/img/360x202/img1.jpg" alt="Image description">
              
            

Loading images only as they enter the viewport, if not lazy-empty.png will loaded. This will make your page faster and more efective for user bandwidth.

You can read complete documentation in here Vanilla Lazyload

Ratio Thumbnail images

Ratio Thumbnail images make your background images show loading before real images complete loaded. This component also responsive in any device.

              
                <!--thumbnail-->
                <div class="ratio_360-202 image-wrapper">
                  ....
                </div>
              
            

How to make ratio thumbnail images ?

Tutorial calculate the ratio space example image size 400x250px is 250/400*100 = 62.5%

You can insert your ratio images from assets/scss/theme/ratio/_ratio.scss