Owlcarousel2: lazyLoad doesn't work

[thany]

lazyLoad isn't working. The images don't load at all. No errors in the console. Here's my call to owlcarousel:

$(".owl-carousel").owlCarousel({
  items: 3,
  loop: true,
  center: true,
  nav: true,
  navText: [ '‹', '›' ],
  dots: false,
  lazyLoad: true
});

And the html:

<div class=owl-carousel>
  <div><img src=# data-src=/assets/austin-healey-3000-01-0afb6f80.jpg></div>
  <div><img src=# data-src=/assets/austin-healey-3000-02-ebf498d6.jpg></div>
  <div><img src=# data-src=/assets/austin-healey-3000-03-077fa1e1.jpg></div>
</div>

The images exist. Honestly, they do. I've also tried leaving src empty, and leaving out src completely. Owl-carousel seems to be totally ignoring the fact that I passed lazyLoad and/or the fact that the data-src is right there. The lazyLoad plugin is included, as far as I can tell.

[iclukas]

You need to add class="owl-lazy" to the elements, look at the demo: http://www.owlcarousel.owlgraphic.com/demos/lazyLoad.html

[thany]

Ah well, that's only in the demos then, not in the documentation. Iyam, a demo shouldn't be a substitute for documentation.

Apart from that, I'm already telling the plugin in _two_ different ways that I want lazyLoad functionality. I'm passing the lazyLoad:true option and I'm putting the data-src attributes on images. So why should I need to use a _third_ way to tell the plugin the same thing?...

In short, why is just passing lazyLoad:true not enough?

[iclukas]

Documentation is still in beta, I think it says so somewhere.
For your question I guess you should ask the author. But I can think of a good reason myself: data-src is also used by other scripts (e.g. jQuery.unveil). If you want to mix lazyloaders, the class helps selecting the correct one.

[thany]

then I imagine the lazyLoad option may just as well be a css selector. Then it stead of true, you'd pass it img[data-src] or img.owl-lazy or whatever you've got in your html. If we _must_ have css classes in the html, then I don't understand what the lazyLoad option is for, since the owl-lazy classes could just as well trigger lazyload functionality.

The point is, one of the two is superfluous. And in an extreme case of DRY, I'd opt for not requiring css classes. Also, because CMS'es may frak things up from time to time, and not requiring too much specifics in html may improve compatibility with those as well.

[dashukin]

Each slide could contain multiple items not related with owl-carousel. Main images could be loaded via owl.lazy plugin. Additional there could be a lot of additional icons which should be loaded with unveil.js for example.
lazyLoad flag is very helpfull to disable this functionality for some quick testing.
And .owl-lazy className separates owl images from other lazy images.

[vaibhavi3t]

same issue. I have also added owl-lazy to my img element. My config
$carouselName.owlCarousel({
loop: false,
dots: true,
items: 5,
slideBy: 5,
lazyLoad: true,
margin: 24,
nav: true,
navText: ["",""],
navSpeed: 80,
mouseDrag : true,
animateOut: 'fadeOut'
});

Owl is generating src from data-src for my first image only but I'm showing 5 images in my first view. You can see in configuration. Please help, don't know what is going on.

[ciases]

lazysizes to the rescue!

[cypispga]

.owl-carousel .owl-item .owl-lazy.loaded{
opacity: 1;
}
fix for me