This should be in the docs imo as people will not realise it's not w3c valid in this way (obviously should be checking anyway), but:

lozad.js will overwrite an existing src attribute, so, you can preset it with an inline data uri. As an example:

<img class=lozad" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="/brochure.png" alt="">

Would be helpful if a library of various inline data images like this existed.

Turns out you can get w3c errors still if you use the data-srcset attribute and an accompanying sizes attribute... sigh

The sizes attribute may be specified only if the srcset attribute is also present.

This is something else that #144 would fix I believe

Hah, just fixed with:

const observer = lozad('.lozad', {
          loaded: (el) => {
            el.setAttribute('sizes', el.dataset.sizes);
            el.removeAttribute('data-sizes');
          },
        });

Should be built in though, if you can do the same with data-srcset

@joepagan This probably fixes the issue with W3C validator. But in a quick test, only Chrome and Firefox downloaded the correct sizes for images. Other browsers like IE and Safari were ignoring the sizes attribute when it’s updated in the loaded callback. I assume that the sizes attributes would have to be updated before the srcset attribute is updated.

Well, what I suggested is just a temp work around, I think lozad should deal with this really.

Maybe a more suitable fix is to leave the sizes attribute on the element

Any news on this? it has been a while and there is still no fix

hey @ApoorvSaxena please assign this issue to me

+1