FR: Support for lazy loading images

[TomDeSmet]

This plugin looks very interesting, but it seems that there is no support now for lazy loading images with libraries such as Lozad? Lozad works in its own specific way of course so maybe a built-in option would be nicer.

[piotrpog]

I will look into it, but at the first glance, doesn't this specific lib have problem with <picture> element? https://github.com/ApoorvSaxena/lozad.js/issues/144

It does not allow <img> inside picture which means that we cannot add classes to our image. Also, from code example on library docs, it seems that <source inside picture will be able to load in regular way, srcset was not replaced with anything:

<picture class="lozad" style="display: block; min-height: 1rem" data-iesrc="images/thumbs/04.jpg" data-alt="">
    <source srcset="images/thumbs/04.jpg" media="(min-width: 1280px)">
    <source srcset="images/thumbs/05.jpg" media="(min-width: 980px)">
    <source srcset="images/thumbs/06.jpg" media="(min-width: 320px)">
    <!-- NO img element -->
    <!-- instead of img element, there will be the last source with the minimum dimensions -->
    <!-- for disabled JS you can set <noscript><img src="images/thumbs/04.jpg" alt=""></noscript> -->
</picture>

[TomDeSmet]

Well, we're not married to Lozad, so any other option would be good also :) We're using it in our projects now, but it would be great if your plugin offered something similar. I like your plugin as it generates webp images which is great for performance, but lazy loading is equally important. I'm not suggesting any specific way lazy loading should be implemented, Lozad is just the thing I know best, but can be lots of other things I suppose.

[piotrpog]

@TomDeSmet As of right now, you can just add loading=lazy attribute to images (by using third param of picture() function in toolbox plugin ). Its native lazy loading. Won't work os safari thought.

[TomDeSmet]

I know but every browser implements this in a different way so I don't feel it is the better option. And it doesn't have support for legacy browsers either...

[piotrpog]

@TomDeSmet Lazysizes library seems to be most popular. https://github.com/aFarkas/lazysizes

It requires replacing src with data-src and srcset with data-srcset. I will just add this option to the plugin.

[CreateSean]

Has this option been added? I could not find it in the docs.

[piotrpog]

@CreateSean Not yet, but it will be soon.

[CreateSean]

good news, thank you.

Looking forward to it.

[Kimixi]

In the mean time, I did the following to get it working with the lazysizes library:

{% set htmlAttributes = {
    src: false,
    class: 'lazyload',
    loading: 'lazy',
    data: {
        src: image.url,
     }
}) %}

Add the attributes

{{ craft.images.pictureMedia(image, transforms, commonSettings, htmlAttributes) }}

Although I could not change the srcsetto data-srcset it works perfectly, this is my js code:

// check if lazy loading is natively supported
if ('loading' in HTMLImageElement.prototype)
{
      const images = document.querySelectorAll('img[loading="lazy"]');
      images.forEach(img => {
            img.src = img.dataset.src;
      });
}
else
{
      // import the lazysizeslibrary
      import('lazysizes');
}

[kevinmu17]

I will look into it, but at the first glance, doesn't this specific lib have problem with <picture> element? ApoorvSaxena/lozad.js#144

It does, and for years now. So i think there is no intention of fixing this issue.

[SoftboiledStudios]

Hello!

When I try to use the browser-native loading=lazy, I have an issue that the images don't lazy load because I don't have a height of width defined on my img tag. Ideally, the width and height should be given to the different source tags, so that the img tag takes over those properties and can calculate the appropriate aspect-ratio for that image, is that something that is possible right now?