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

【问题标题】：Lazy loading does not work if the image is inside a block如果图像在块内，则延迟加载不起作用
【发布时间】：2021-03-26 15:07:53
【问题描述】：

我正在 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
});

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

【问题讨论】：

标签： javascript owl-carousel

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

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

【讨论】：