add source images to lazyloading

[VadimZvf]

lazyloading sources of images

[ganlanyuan]

Thanks. I will need a little more time considering this

[ganlanyuan]

Sorry for the delay. Could you provide an HTML example of lazy loading sources of images?

[Rombecchi]

It'll be very useful if you can add an AJAX/JSON resource for the list. Some like that: [{"src": "pic1.jpg", "caption": "Picture 1"}, {"src": "pic2.jpg", "caption": "Picture 2"}, ...]

[WebDevMaster2016]

@ganlanyuan hi. Any updates here? It's very useful feature. It will be nice if you will push this feature. Thanks)

[blueskies79]

I would also love this feature! Any updates?

[blueskies79]

@ganlanyuan If it helps, this is an HTML 5 example that I currently want use in the tiny-slider:

<picture>
    <source media='(min-width: 768px)'
                            data-srcset='desktop-image.jpg'/>
    <source media='(max-width: 767px)'
                            data-srcset='mobile-image.jpg'/>
    <img width="1080" height="1080"
                         alt="the alt tag"
			 class="img-fluid carousel-slide-image tns-lazy-img w-100"/>
</picture>

[grasmachien]

I also really would like to see this added but seeing as it has been 4 years since this has been suggested I don't hold much hope ...

[philharmonie]

@VadimZvf I pulled the PR but it is not working:

<div id="slider">
    <picture>
        <source srcset="img1.wbep" type="image/webp">
        <img src="img1.png">
    </picture>
    <picture>
        <source srcset="img2.wbep" type="image/webp">
        <img src="img2.png">
    </picture>
</div>
<script>
tns({
    container: "#slider",
    items: 1,
    autoplay: true,
    slideBy: "page",
    lazyload: true,
});
</script>

The slide is working but presenting the png files.

[VadimZvf]

Hey! Sorry, I haven't been following this PR for so long:( I forgot I ever created this PR.

It seems to me that this PR is useless already, I'll close it If you need a lazy loaded picture tags you can use the lazyloadSelector option for specify selector for any custom tag that you need

[anakadote]

@VadimZvf could you please provide an example of that?

If you need a lazy loaded picture tags you can use the lazyloadSelector option for specify selector for any custom tag that you need

[VadimZvf]

@VadimZvf could you please provide an example of that?

If you need a lazy loaded picture tags you can use the lazyloadSelector option for specify selector for any custom tag that you need

Have you tried to add: lazyloadSelector: 'img, source'?

[anakadote]

Have you tried to add: lazyloadSelector: 'img, source'?

Yeah, but it was still loading all the srcset images on load. I figured out that it is necessary to also replace "srcset" with "data-srcset". An example for those looking for the same answer:

const slider = tns({
  ...
  lazyload: true,
  lazyloadSelector: 'img, source',
})

<picture>
  <source 
    data-srcset="/path/to/image.webp" 
    type="image/webp" 
    media="(max-width: 799px)"
  >
  <source 
    data-srcset="/path/to/image.webp" 
    type="image/webp" 
    media="(min-width: 800px) and (max-width: 1599px)"
  >
  <source 
    data-srcset="/path/to/image.webp}}" 
    type="image/webp" 
    media="(min-width: 1600px)"
  >
  <img data-src="/path/to/image.jpg" alt="">
</picture>

[VadimZvf]

It seems to me that lazyloadSelector works, there are some problems, For example the picture tag status stuck in the "loading". But in general it works. Proof:)

https://github.com/ganlanyuan/tiny-slider/assets/13214738/0d89e087-0384-44b0-ac69-b8d2d69edc4f

I've added following code:

<div class="item">
  <div>
    <a href="">
      <picture>
        <source class="tns-lazy-img" srcset="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20600%20600'%3E%3C/svg%3E" data-srcset="https://images.pexels.com/photos/3687770/pexels-photo-3687770.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" media="(min-width: 600px)" alt="" width="600" height="600" />

        <img class="tns-lazy-img" srcset="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20600%20600'%3E%3C/svg%3E" data-srcset="https://source.unsplash.com/collection/548245/600x600"  data-src="https://source.unsplash.com/collection/548245/600x600" alt="" width="600" height="600" />
      </picture>
    </a>
  </div>
</div>

lazyload: true,

Can you send a more detailed example? A reproduction where the lazy loading doesn't work.