Picture Element Lazy Loading
See original GitHub issueFirstly, 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:
- Created 5 years ago
- Reactions:10
- Comments:11
Top 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 >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
I’d rather avoid maintaining my own patched version of any 3rd party software. As a workaround, I’ve used this:
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.Correct me if I’m wrong, but here’s an idea:
Output:
Don’t add a
lozad
class directly to the<picture>
tag, but to the<img>
tag. This way you can add custom styles (such asaspect-ratio
or additional classes) to the<picture>
and<img>
tags. You also avoid the confusingdata-iesrc
attribute.