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

Question

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

我的 slider :

//  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但我也看到猫头鹰旋转木马有一个内置功能 here .哪个最好用？简单地添加 lazyLoad: true, 对我不起作用。

Answer 1

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

LazyLoad HTML structure requires class="owl-lazy" and data-src="url_to_img" or/and data-src-retina="url_to_highres_img". If you set above settings not on but on other DOM element then Owl will load an image into css inline background style.

所以我用 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