FR: Support for srcset and sizes attributes when lazy loading slides

[rob-c-baker]

It would be nice to have lazy loading support for responsive images using the srcset and sizes HTML attributes.

[NaotoshiFujita]

Now that is available. Use data-splide-lazy-srcset attribute in the latest build 👍

<img
  data-splide-lazy-srcset="600.jpg 600w, 1000.jpg 1000w"
  sizes="100vw"
  data-splide-lazy="1000.jpg"
>

[rob-c-baker]

That was quick!

I'll get my dev site onto the latest build as soon as possible.

Many thanks.

[realovich]

Hello! Thanks for this library! How can I use webp image format with lazy load?

[NaotoshiFujita]

@realovich Nothing is different with other formats.

<img data-splide-lazy="https://picsum.photos/600/300.webp">'

But a fallback with a picture tag is not supported.

[realovich]

@NaotoshiFujita thanks for your reply! Are you planning to add <picture> tag support for lazy load?

[NaotoshiFujita]

@realovich No now. Maybe in the future...

[rob-c-baker]

Hi @NaotoshiFujita,

Thanks for adding this in so fast. There is a small issue though.

On line 4982 of splide.esm.js in the latest release 2.4.8 it checks for the presence of pre-existing src and srcset attributes before loading the image. In my case, I have a transparent SVG set on the img tag src attribute as follows:

<img src="data:image/svg+xml..." sizes="..." data-splide-lazy-srcset="..." alt="....">

This is to prevent some browsers showing a broken image icon in place of the image before the image is loaded.

Because I have something in the src attribute, the image is not loaded from the new data-splide-lazy-srcset attribute.

Is it possible to set a class, something like class="splide-lazy-loaded" (or even a "loaded" data attribute) once the image is lazy loaded for the first time and check for that instead of checking the attributes directly?

[NaotoshiFujita]

Of course it is technically possible, but it should not be like that in my opinion. Lazy loading is just deferring to set src or srcset of an image element, and therefore it should be enough to check their existence to know the loaded(applied) status.

Basically, you don't have to set the transparent image to hide the broken icon, because Splide makes image elements hidden before they are loaded. Even if it doesn't work well for some reason, we have a nice CSS way.

img:not([src]):not([srcset]) {
  display: none;
}

If the icon is still shown, that means the browser doesn't recognize CSS 😓

[rob-c-baker]

OK, that works.

The only reason I suggested what I did was because that's how the lazy loading works on the rest of the images on the site in question.

Thanks again for your efforts.

[apokaliptis]

For other people coming here like me looking for how to make their webp's fallback to jpeg, here's how you can do it using Modernizr with webp checks:

<div class="slider">
    <img data-splide-lazy="path/to/img.webp" data-fallback-lazy="path/to/img.jpg">
   . . .
</div>

Modernizr.on('webp', async function(result) {
  if (!result) { // Fallback to jpeg on older browsers

    // Get images with fallback option
    let webpImgs = document.querySelectorAll('img[data-fallback-lazy]')

    // Fallback each image
    for (let img of fallbackImgs) {
      let fallbackPath = img.getAttribute("data-fallback-lazy")
      if (fallbackPath) {  // Ensure fallbackPath isn't null
        el.setAttribute("data-splide-lazy", fallbackPath)
      }
    }
  }
})

// Now load Splide.js
new Splide( ".slider", { /* options */ }).mount()

[Jonatan-r]

@NaotoshiFujita

Any 2022 update on this?

– That is, having splide lazyload for multiple image sizes in webp with fallback for older non-webp browsers (probably using the picture tag)? ❤️ Without the need for a "hack" as @apokaliptis provided above?

#82 (comment)

For other people coming here like me looking for how to make their webp's fallback to jpeg, here's how you can do it using Modernizr with webp checks:

<div class="slider">
    <img data-splide-lazy="path/to/img.webp" data-fallback-lazy="path/to/img.jpg">
   . . .
</div>

Modernizr.on('webp', async function(result) {
  if (!result) { // Fallback to jpeg on older browsers

    // Get images with fallback option
    let webpImgs = document.querySelectorAll('img[data-fallback-lazy]')

    // Fallback each image
    for (let img of fallbackImgs) {
      let fallbackPath = img.getAttribute("data-fallback-lazy")
      if (fallbackPath) {  // Ensure fallbackPath isn't null
        el.setAttribute("data-splide-lazy", fallbackPath)
      }
    }
  }
})

// Now load Splide.js
new Splide( ".slider", { /* options */ }).mount()