当动态高度打开时,Lazyload会切断图像高度

问题描述 投票:2回答:4

当我在启用动态高度的图像幻灯片上启用Lazyload时,它会切断并仅显示照片高度的一小部分,我附上了截图,如果初始加载可以完美地查看图像,请使用切换箭头和你将能够看到我的意思。

我一直在尝试各种修复无效,因为这是我购买的html主题,不幸的是,主题作者也无法帮助我,你的帮助将不胜感激。

我在自定义脚本文件中的JS是:

     $(".property-carousel").owlCarousel({ 
         rtl: _rtl, items: 1, lazyLoad : true, 
         responsiveBaseWidth: ".property-slide", dots: false, 
         autoHeight: true, nav: true, navText: ["", ""], loop: true 
      });

here is also a screenshot

javascript jquery html css lazy-loading
4个回答
0
投票

尝试在功能上添加自动高度

owlCarousel({
      items: 1,
      loop: true,
      autoHeight: true
    });

设置自动高度为true

autoHeight: true

0
投票

你需要在OwlCarousel中设置lazyload true:

lazyLoad: true

Go to the documentation for more


0
投票

这是我对问题的解决方案:

gallery.owlCarousel({
    margin:5,
    loop:false,
    autoHeight:true,
    items:1,
    nav: false,
    dots: false,
    lazyLoad:true
});
gallery.on('loaded.owl.lazy', function(event) {
    $(this).find('.owl-item.active img').one('load', function () {
        gallery.trigger('refresh.owl.carousel');
    });
});

0
投票

我也有这个问题,“lazyLoad”结合“autoHeight”切断了一些图像,因为猫头鹰旋转木马没有考虑到懒人图像的高度。对我来说,这是有效的(修改@baduga的答案):

var myCarousel = $(".property-carousel").owlCarousel({ 
    lazyLoad : true, 
    autoHeight: true
});
myCarousel.on('loaded.owl.lazy', function(event) {
    myCarousel.trigger('refresh.owl.carousel');
});
© www.soinside.com 2019 - 2024. All rights reserved.