javascript - How to use lazyloader with an owl carousel that uses background images - Stack Overflow

admin管理员组

文章数量:1399986

I got a semi custom owl carousel that uses background images to display images instead of regular img tags. Now I would like to add lazyloading to the slider so it only loads an image when the slide is active. Owl carousel has a nice function for it but I can't get it to work. How can this be achieved?

My 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>
?>

And my carousel code:

$(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)
})

I want to use the following plugin but I also see owl carousel has a build in function here. Which one is best to use? Simply adding lazyLoad: true, is not working for me.

I got a semi custom owl carousel that uses background images to display images instead of regular img tags. Now I would like to add lazyloading to the slider so it only loads an image when the slide is active. Owl carousel has a nice function for it but I can't get it to work. How can this be achieved?

My 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>
?>

And my carousel code:

$(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)
})

I want to use the following plugin but I also see owl carousel has a build in function here. Which one is best to use? Simply adding lazyLoad: true, is not working for me.

• javascript
• jquery
• css

Share Improve this question Follow asked Sep 13, 2016 at 11:46 twantwan 2,6591212 gold badges4242 silver badges115115 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 2

I was working on something like what you're trying to achieve. This is how I got it working. From the owl Carousel 2 docs

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.

SO I created my carousel elements with div and set the data src to the image url pulled from the database and then manipulated it with css and media queries to get it working correctly in the browsers.

Hope this helps, find below:

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 Queries:

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

References: https://owlcarousel2.github.io/OwlCarousel2/demos/lazyLoad.html

本文标签： javascriptHow to use lazyloader with an owl carousel that uses background imagesStack Overflow