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

我正在研究你想要实现的目标。这就是我的工作方式。来自猫头鹰Carousel 2 docs

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

所以我用div创建了我的carousel元素，并将数据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

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

1 个答案: