Picture Element Lazy Loading

Firstly, thanks fo creating this amazing tool. I use it on almost every website I build. I would, however, like to open a discussion about the way that picture elements are lazy-loaded.

Why not just put the class lozad on the picture element and add then, when it enters the viewport, change all data-srcset attributes to srcset attributes on the source elements and on the img element, do the same but also change data-src elements to src elements.

The markup would then just become

<picture class="lozad">
    <source data-srcset="image.png">
    <img data-src="image2.png">
</picture>

Adding the data-iesrc attributes to the picture elements etc just seems confusing to me and I’m not sure what benefit it brings.

I would be very happy to submit a PR if this is something you are interested in?

[jsandeo]

I’d rather avoid maintaining my own patched version of any 3rd party software. As a workaround, I’ve used this:

<picture class="picture-lozad">
  <source data-srcset="image.png">
  <img class="whichever-classes-i-need" data-src="image2.png" alt="whatever-alt-i-need">
</picture>

<script>
const picture_observer = lozad('.picture-lozad', {
  load: function(el) {
    $(el).find('source').each(function(){$(this).attr('srcset', $(this).attr('data-srcset'))})
    $(el).find('img').each(function(){$(this).attr('src', $(this).attr('data-src'))})
  }
});
picture_observer.observe();
</script>

This has the benefit that you get to use any classes you might need for layout at the <img> and also to place the ‘alt’ attribute right where it belongs. I use ‘data-srcset’ instead of just ‘srcset’ in the <source> elements because modern browsers will fetch their preferred image from the ‘srcset’ even if the <img> itself has no ‘src’, thus bypassing the whole lazy image loading behavior that was intended in the first place.

[ivodolenc]

Correct me if I’m wrong, but here’s an idea:

<picture>
  <source srcset="/image-1280.jpg" media="(min-width: 1280px)" />
  <img data-src="/image-fallback.jpg" class="lozad" />
</picture>

Output:

<picture>
  <source srcset="/image-1280.jpg" media="(min-width: 1280px)" />
  <img
    data-src="/image-fallback.jpg"
    class="lozad"
    src="/image-fallback.jpg"
    data-loaded="true"
  />
</picture>

Don’t add a lozad class directly to the <picture> tag, but to the <img> tag. This way you can add custom styles (such as aspect-ratio or additional classes) to the <picture> and <img> tags. You also avoid the confusing data-iesrc attribute.