Tiny-slider: Improvement : retina lazyload src

[ThaoD5]

It would be great to have an option to use a retina image in case we have retina screen instead of normal images, for example, for now we only have :
data-src="..."
We could maybe think about something like
data-retina-src="..." to use along with the data-src ?

Use case : We're having a slider of pictures for a high quality dress shop, so we need assets to be as sharp as the user can use.

Thanks for your work :-)

[ThaoD5]

Or maybe even better : a support to use along with the "picture" tag (using it with picturefill for now), so that we can even have different src for mobile / tablet / desktop ( just thinking about it now )

( not really sure about how to proceed, or if this is even possible at all ? )

[marcaj]

Check out that now in master branch there is a code for supporting srcset attribute for lazyloading. You just need to add data-srcset attribute on image. You can easily add images for retina via this attribute. Hope this will help.
Unfortunately I am still waiting for new version, since this patch is not included in v2.8.6.
@ganlanyuan any idea when the new version will come? We are really waiting for this code to ship it on the production.

[f-jost]

This issue is resolved in 2.8.7, @ganlanyuan I think you could add this new feature in the documentation ;)

[f-jost]

Ouch I don't understand, I have update tiny-slider to 2.8.7 but I have to add myself tns-lazy-img css class on <img>Otherwise, it does not work.
Try with your pen @ganlanyuan https://codepen.io/ganlanyuan/pen/WyOmyJ with removing the tns-lazy-img, in the console the src attribute is not updated

[marcaj]

Yeah there is no info in the documentation about required css class. Also could be nice if the class would be part of the configuration.

[ganlanyuan]

README updated;
A new option lazyloadSelector was added. (will be available at v2.8.8)