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

Question

我在 owl 中进行延迟加载。如果我将图像放在“owl-item”块中，“owl-loading”class 不会替换为主容器中的“owl-loaded” “owl-carousel”，导致幻灯片内容不显示。如果我放置没有“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
});

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

Answer 1

你的 JS 是在 ready 事件中执行的吗？也可以尝试 class lazyOwl 而不是 owl-lazy

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

Answer 2

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

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

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

Lazy loading does not work if the image is inside a block

javascript

owl-carousel