title: How to use lazyloader with an owl carousel that uses background images
body: <p>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?</p>
  
  <p>My slider:</p>
  
  <pre><code>//  content articles
  $slider             = "SELECT * FROM `web_content` WHERE catid = 10 AND state = 1 AND featured = 1 ORDER BY ordering";
  $slidercon          = $conn-&gt;query($slider);
  $slidercr           = array();
  while ($slidercr[]  = $slidercon-&gt;fetch_array());
  ?&gt;
  &lt;!-- Home - Slider --&gt;
  &lt;!-- ++++++++++++++++++++++++++++++++++++++++ --&gt;
  
  &lt;section class="service-header home_slide_header"&gt;
      &lt;?
      $i = 1;
      foreach($slidercr as $slider){
          $i++;
  
          $slider_bgs = $slider['images'];
          $slider_background = json_decode($slider_bgs); // Split JSON 
  
          if($slider_background-&gt;{'image_fulltext'} != ''){
              $bgimg = 'cms/'.$slider_background-&gt;{'image_fulltext'};
          }else{
              $bgimg = 'http://website/nl/cms/images/Projecten/Images/background_placeholder.jpg';    
          }
  
          if($slider['id'] != ''){
              $backgrounds .= '
              &lt;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;"&gt;
              &lt;/div&gt;';
          }
      }
  
      echo $backgrounds;
      ?&gt;
      &lt;div class="container"&gt;
          &lt;div class="row"&gt;
              &lt;div id="owl-demo" class="owl-carousel owl-theme"&gt;
              &lt;?
                  $a = 1;
                  foreach($slidercr as $slider1){
                      $shortstr = substr($slider1['introtext'], 0, 100) . '...';
                      $a++;
                      if($slider1['id'] != ''){
                          $slidercontent .= '
                          &lt;div class="item" data-src=".sliderclass'.$a.'"&gt;
                              &lt;div class="bolletje"&gt;&lt;/div&gt;
                              &lt;p class="slide_header"&gt;'.$slider1['title'].'&lt;/p&gt;
                              &lt;div class="info_text"&gt;
                              '.strip_tags($shortstr).' &lt;a class="bekijkprojectindex infolink" href="'.$slider1['alias'].'.html"&gt;Bekijk project&lt;/a&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;';    
                      }
                  }
                  echo $slidercontent;
              ?&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/section&gt;
  ?&gt;
  </code></pre>
  
  <p>And my carousel code:</p>
  
  <pre><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: [ '&lt;img src="home_slider/button_left.png" /&gt;', '&lt;img src="home_slider/button_right.png" /&gt;' ],
          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)
  })
  </code></pre>
  
  <p>I want to use the following <a href="http://www.appelsiini.net/projects/lazyload" rel="nofollow">plugin</a> but I also see owl carousel has a build in function <a href="http://www.owlcarousel.owlgraphic.com/demos/lazyLoad.html" rel="nofollow">here</a>.
  Which one is best to use? Simply adding <code>lazyLoad: true,</code> is not working for me.</p>