unable to lazy load images
I am currently doing local web dev using CF workers. I am generating an html using ES6 string interpolation like this
The problem is that when I serve my html, any image (irrespective of where it is hosted) with the property loading="lazy" is simply not being served. if I remove the loading=lazy, it works fine.
When it doesn't works, the browser's network tab doesn't shows the image either.
Is this a know issue?
3 Replies
This works
This doesn't
Did you manage to work out what was going on? To me it sounds like a front-end issue rather than a workers one, particularly since there is nothing in the network tab. Please note, when loading="lazy" is specified on an image element, the browser only loads the resource if the element is 'in view' and this includes if the element has no natural height or width. Given your example code it's indeterminate whether the images have any width/height allocated to them, so try setting the height and width on them and see what happens. e.g.
<img src="/avatars/32606955_7942348.jpg" alt="logo" loading="lazy" height="100" width="100"/>Thanks! it might be the issue with the element not having height or width. Let me check. Thanks for pointing me the right way!