Owlcarousel2: support responsive imags with lazyload (current solution is just a workaround!!)

Created on 19 Nov 2015 · 6Comments · Source: OwlCarousel2/OwlCarousel2

So I found the following example in your docs:
<img class="owl-lazy" data-src="http://placehold.it/350x250&text=1" data-src-retina="http://placehold.it/350x250&text=1-retina" alt="">
(copied from here: http://www.owlcarousel.owlgraphic.com/demos/lazyLoad.html)

This is not a standard way to support responsive images. It would be rather desirable if you supported the srcset attribute with data-srcset for lazyloading.

it should be rather simple: just add the srcset attribute from the data-attributes and the rest is done by the browser.

Maybe have a look at how lazysizes.js does it: https://afarkas.github.io/lazysizes/

Source

wstoettinger

👍2

Most helpful comment

i created the following pull request:
https://github.com/smashingboxes/OwlCarousel2/pull/1134

i left the "data-src-retina" in place although it feels wrong to do that! i understand that there is probably no other way if it's a CSS background image but then it should be documented properly.

wstoettinger on 19 Nov 2015

👍4

All 6 comments

i created the following pull request:
https://github.com/smashingboxes/OwlCarousel2/pull/1134

i left the "data-src-retina" in place although it feels wrong to do that! i understand that there is probably no other way if it's a CSS background image but then it should be documented properly.

wstoettinger on 19 Nov 2015

👍4

It would be great to have srcset support. I hope this will be added soon.