如何应用延迟加载？

Question

我正在尝试对使用此 theme 创建的页面应用延迟加载函数。此 guide 的基本示例在控制台中没有错误，但延迟加载不起作用。如何修改我的代码？下面是我的div示例，脚本部分是从html文件中分离出来的。

<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

根据jquery lazy的文档，要在其他元素上加载背景，您应该这样做：

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

因此，您应该更改代码以包含data-src属性：

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