Home

Welcome to the tiny-slider wiki!

Here the questions and answers can be found so that "Issues" won't become the information hub

Information:

Lazy loading for picture tag

Lazy loading for picture tag

Picture is one of the options next to img which has lazyloading support.
A example is:

<picture>
  <source class="tns-lazy-img"
    srcset="data:image/gif;base64,R0lGODlhAQABAPAAAMzMzAAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" width="600"
    height="320" media="(min-width:650px)"
    data-srcset="https://source.unsplash.com/collection/993221/600x320"/>
  <source class="tns-lazy-img"
    srcset="data:image/gif;base64,R0lGODlhAQABAPAAAMzMzAAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" width="600"
    height="320" media="(min-width:465px)"
    data-srcset="https://source.unsplash.com/collection/993220/600x320"/>
  <img class="tns-lazy-img"
    src="data:image/gif;base64,R0lGODlhAQABAPAAAMzMzAAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" width="600"
    height="320" data-src="https://source.unsplash.com/collection/993222/600x320"/>
</picture>

You can put this in an item. The first src and srcset is what gets show before the image is fully loaded. so you could change it with a image that says loading for example(now it's a 1x1 blanc image so not noticeable). the data-srcset works the same as the data-src.