如何将lazyloader与使用背景图像的猫头鹰轮播一起使用

Question

我有一个半定制的猫头鹰轮播，它使用背景图像而不是常规的 img 标签来显示图像。现在我想向滑块添加延迟加载，以便它仅在幻灯片处于活动状态时加载图像。猫头鹰旋转木马有一个很好的功能，但我无法让它工作。如何实现？

我的滑块：

//  content articles
$slider             = "SELECT * FROM `web_content` WHERE catid = 10 AND state = 1 AND featured = 1 ORDER BY ordering";
$slidercon          = $conn->query($slider);
$slidercr           = array();
while ($slidercr[]  = $slidercon->fetch_array());
?>
<!-- Home - Slider -->
<!-- ++++++++++++++++++++++++++++++++++++++++ -->

<section class="service-header home_slide_header">
    <?
    $i = 1;
    foreach($slidercr as $slider){
        $i++;

        $slider_bgs = $slider['images'];
        $slider_background = json_decode($slider_bgs); // Split JSON 

        if($slider_background->{'image_fulltext'} != ''){
            $bgimg = 'cms/'.$slider_background->{'image_fulltext'};
        }else{
            $bgimg = 'http://website/nl/cms/images/Projecten/Images/background_placeholder.jpg';    
        }

        if($slider['id'] != ''){
            $backgrounds .= '
            <div class="lazy bg-slider sliderclass'.$i.'" style="background: url('.$bgimg.');
                background-repeat:no-repeat;
                -webkit-background-size:cover;
                -moz-background-size:cover;
                -o-background-size:cover;
                background-size:cover;
                background-position:top;">
            </div>';
        }
    }

    echo $backgrounds;
    ?>
    <div class="container">
        <div class="row">
            <div id="owl-demo" class="owl-carousel owl-theme">
            <?
                $a = 1;
                foreach($slidercr as $slider1){
                    $shortstr = substr($slider1['introtext'], 0, 100) . '...';
                    $a++;
                    if($slider1['id'] != ''){
                        $slidercontent .= '
                        <div class="item" data-src=".sliderclass'.$a.'">
                            <div class="bolletje"></div>
                            <p class="slide_header">'.$slider1['title'].'</p>
                            <div class="info_text">
                            '.strip_tags($shortstr).' <a class="bekijkprojectindex infolink" href="'.$slider1['alias'].'.html">Bekijk project</a>
                            </div>
                        </div>';    
                    }
                }
                echo $slidercontent;
            ?>
            </div>
        </div>
    </div>
</section>
?>

还有我的轮播代码：

$(document).ready(function() {
var old = '';
function setOld(){
        setTimeout(function(){
            old = $(".center").find('.item').data("src");
            $(old).fadeIn('1000');
        },50)
}

var owl = $("#owl-demo");
owl.owlCarousel({
        center: true,
        loop:true,
        lazyLoad:true,
        autoplay: true, //Set AutoPlay to 3 seconds
        responsiveClass:true,
    responsive:{
                0 :{
                        items:1,
                        loop:true
                },
                900 :{
                        items:3,
                        loop:true
                },
    },
        nav: true,
        navText: [ '<img src="home_slider/button_left.png" />', '<img src="home_slider/button_right.png" />' ],
        navSpeed: false,
        navElement: 'div',
        navContainer: false,
        navContainerClass: 'owl-nav',
        navClass: [ 'owl-prev btn', 'owl-next btn' ],
        onInitialized: setOld()
});

owl.on('changed.owl.carousel', function(event) {
    $(old).fadeOut('1050');
    setTimeout(function(){
        var src = $(".center").find('.item').data("src");
        $(src).fadeIn('1000');
        old = src;
    },50)
})

我想使用以下plugin，但我也看到owl carousel 有一个内置函数here。 哪个最好用？简单地添加 lazyLoad: true, 对我不起作用。

Answer 1

我正在研究您想要实现的目标。这就是我让它工作的方式。来自 owl Carousel 2 文档

LazyLoad HTML 结构需要 class="owl-lazy" 和 data-src="url_to_img" 或/和 data-src-retina="url_to_highres_img"。如果您在其他 DOM 元素上而不是在其他 DOM 元素上设置上述设置，则 Owl 会将图像加载到 css 内联背景样式中。

所以我用 div 创建了我的轮播元素并将数据 src 设置为图像 url 从数据库中提取，然后使用 css 和媒体查询对其进行操作，使其在浏览器中正常工作。

希望对您有所帮助，请在下面找到：

HTML：

<div class="owl-carousel owl-theme">
<div class="slide-item owl-lazy" data-src="https://placehold.it/350x250&text=3"></div>
<div class="slide-item owl-lazy" data-src="https://placehold.it/350x250&text=3"></div>
</div>

CSS：

.slide-item{ position: relative;
background-repeat: no-   repeat;
background-position: top center;background-size: cover;}

Css 媒体查询：

@media screen and (max-width: 39.9375em) {
.slide-item{min-height: 280px;background-position: center;    background-size: cover;} }
@media screen and (min-width: 40em) {
.slide-item{ height: 360px; min-height: 360px;} }
@media screen and (min-width: 64em) {
.slide-item{ height: 600px; min-height: 600px;}}

JS：

$('.owl-carousel').owlCarousel(
{
    lazyLoad:true,
    items:1,
    autoplay: true,
    smartSpeed: 1500,
    nav:false,
    dots: true,
    loop : true,
    animateOut: "fadeOut"
  }
);

参考资料： https://owlcarousel2.github.io/OwlCarousel2/demos/lazyLoad.html