The second an image has a
srcset attribute set it will load the image. You need to use a lazy load library that supports the
<picture> element and make sure you haven’t set the
srcset on your
You have misunderstood a key aspect here. The
With their example (which I assume is this example of lazy loading as you did not link it in your question) there is a script you must include in order to make lazy loading work.
If you look at their example these
<img> elements do not have a
src attribute set and so they are invalid and will not load the image.
What the script does is look for
<img> elements that have a class of
lazyload and then look for the
It then takes whatever is in the
data-src attribute and adds that to the
src attribute of the image once the image is within the viewport.
This then makes the image valid (as an
<img> element must have a
src attribute to be valid and actually load the image) and so it loads.
In your example you already have the
src set via the
srcset attribute in your HTML so the images are loaded instantly, the
data-src does nothing in this case.
I am not sure whether the lazy loading library in that example works with
<picture> elements (it appears to want you to use an
<img> element with
data attributes for media queries) so you may want to research a lazy loading library that works with the
<picture> element now that you (hopefully) understand why your implementation is not working.