如何解决如果图像在块内,则延迟加载不起作用
我正在 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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。