如果图像在块内，则延迟加载不起作用

问题描述

我正在 owl 中进行延迟加载。如果我将图像放在“owl-item”块中，则“owl-loading”类不会替换为主容器“owl-carousel”中的“owl-loaded”，因此幻灯片内容不是显示。如果我放置没有“owl-item”的图像，那么一切都会很好。这是我的代码：

<div class = "owl-carousel">
    <div class="owl-item">
        <img class="owl-lazy" data-src="image_link"/>
    </div>
    <div class="owl-item">
        <img class="owl-lazy" data-src="image_link"/>
    </div>
    <div class="owl-item">
        <img class="owl-lazy" data-src="image_link"/>
    </div>
</div>

jQuery('.owl-carousel').owlCarousel({
    items: 1,lazyLoad: true,loop: true
});

我必须将图像放在一个块中，因为除了图像之外还会有其他标记。

解决方法

您的 JS 是否在 ready 事件中执行？也试试类 lazyOwl 而不是 owl-lazy

$(document).ready(function() {
 
  $(".owl-carousel").owlCarousel({
    items : 4,lazyLoad : true,navigation : true
  }); 
 
});

如果我从标记中删除类 owl-item，那么一切都会开始正常工作。

<div class="owl-carousel">
    <div class="owl-item">
        <img class="owl-lazy" data-src="image_link"/>
    </div>
    ...
</div>

javascript owl-carousel