question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Picture Element Lazy Loading

See original GitHub issue

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?

Issue Analytics

  • State:open
  • Created 5 years ago
  • Reactions:10
  • Comments:11

github_iconTop GitHub Comments

2reactions
jsandeocommented, Sep 1, 2022

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.

2reactions
ivodolenccommented, Dec 29, 2020

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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Browser-level image lazy loading for the web - web.dev
This means browser-level lazy loading offers a stable experience regarding the visibility of elements that are scrolled into view.
Read more >
Lazy Loading HTML5 picture element - Stack Overflow
Working example of lazy loading images using the picture element and intersection observer tested in Chrome and Firefox. Safari doesn' ...
Read more >
Lazy loading - Web performance | MDN
Lazy loading is a strategy to identify resources as non-blocking (non-critical) and load these only when needed. It's a way to shorten the ......
Read more >
Lazy Loading Images – The Complete Guide - ImageKit.io
What is Image Lazy Loading? Lazy Loading Images is a set of techniques in web and application development that defer the loading of...
Read more >
lazysizes - the ultimate lazyloader for responsive images ...
The picture element is also supported. Simply add the lazyload class to the img and use data-srcset on your source and the img...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found