How to apply lazy-loading?

Question

I'm trying to apply a lazy-load function for my page created with this theme . The basic example of this guide does not have errors in console but lazy-load is not working. How can I modify my code? Here's an example of my div, script part is separated from my html file.

<div class="nk-portfolio-list nk-isotope nk-isotope-4-cols nk-isotope-gap-xs nk-popup-gallery">


            <div class="nk-isotope-item lazy" data-filter="Abbigliamento">
                <div class="nk-portfolio-item nk-portfolio-item-info-style-2 nk-portfolio-item-lg">
                    <a href="assets/imagesPro/Abbigliamento/1.jpg" class="nk-portfolio-item-link nk-gallery-item" data-size="2747x3275"></a>
                    <div class="nk-portfolio-item-image"><div class="lazy" style="background-image: url('assets/imagesPro/Abbigliamento/l/l1.jpg')"></div></div>
                    <div class="nk-portfolio-item-info nk-portfolio-item-info-center text-center">
                        <div>
                            <div class="nk-portfolio-item-icon"><span class="pe-7s-look"></span></div>
                        </div>
                    </div>
                </div>
            </div>
....
</div>



$(function() {
    $('.lazy').lazy({
    });
});

Answer 1

According to the documentation of jquery lazy for loading backgrounds on other elements you should do something like this:

<!-- load background images of other element types -->
<div class="lazy" data-src="path/to/image.jpg"></div>

So you should change your code to include the data-src attribute:

<div class="lazy" data-src="assets/imagesPro/Abbigliamento/l/l1.jpg"></div>