Javascript 如何将lazyloader与使用背景图像的猫头鹰转盘一起使用

我得到了一个半定制的猫头鹰旋转木马，它使用背景图像来显示图像，而不是常规的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)
})

我想使用以下内容，但我也看到owl转盘有一个内置功能。

---

哪一个最好用？简单地添加lazyLoad：是的，对我来说不起作用。

我在做一些事情，就像你试图实现的那样。我就是这样让它工作的。从猫头鹰转盘2文档

LazyLoad HTML结构需要class=owl lazy和data src=url\u to\u img或/和data src retina=url\u to\u highres\u img。若您不在其他DOM元素上设置上述设置，则Owl将把图像加载到css内联背景样式中

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

希望这有帮助，请查找以下内容：

HTML:

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:

参考资料：

---

我在做一些事情，比如你想要达到的目标。我就是这样让它工作的。从猫头鹰转盘2文档

LazyLoad HTML结构需要class=owl lazy和data src=url\u to\u img或/和data src retina=url\u to\u highres\u img。若您不在其他DOM元素上设置上述设置，则Owl将把图像加载到css内联背景样式中

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

希望这有帮助，请查找以下内容：

HTML:

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:

参考资料：

@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;}}

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