[Webkit-unassigned] [Bug 237703] Native image Lazyloading sometimes doesn’t load

[bugzilla-daemon at webkit.org]

https://bugs.webkit.org/show_bug.cgi?id=237703

--- Comment #9 from Martin Schön <martin.schoen at spiegel.de> ---
Hi Karl! Thanks for checking, your observations match mine. When the bug occurs, it is usually the first n images that don't appear – for me round about 10 images remain blank. Images further down the page do load and show properly.

When I remove the JS Library, I cannot reproduce the issue. However, this requires me to remove the placeholder SVG from the src attribute as well. So this:

```
<img 
    ...
    loading="lazy"
    src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 872 490' width='872' height='490' %3E%3C/svg%3E"
    data-src="https://picsum.photos/id/469/872/490.jpg"
    ...
/>
```

becomes this:

```
<img 
    ...
    loading="lazy"
    src="https://picsum.photos/id/469/872/490.jpg"
    ...
/>
```

The placeholder is important though. We use it to prevent the "broken image" icon from appearing and to reserve space for the image to avoid layout shifts once it loads.

When the JS library detects that the browser supports native lazyloading, the first thing it does is copy the URL from data-src to src. As far as I can tell, this is where the problem occurs.

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20220704/793bf5b3/attachment-0001.htm>