Bug 248025

Summary: Dynamically added loading="lazy" image when already is not reusing the cached image when available
Product: WebKit Reporter: Karl Dubost <karlcow>
Component: ImagesAssignee: Nobody <webkit-unassigned>
Status: NEW ---    
Severity: Normal CC: cdumez, sabouhallawa, webkit-bug-importer
Priority: P2 Keywords: BrowserCompat, InRadar, WPTImpact
Version: Safari Technology Preview   
Hardware: Unspecified   
OS: Unspecified   
URL: https://wpt.fyi/results/html/semantics/embedded-content/the-img-element/image-loading-lazy-available.html
See Also: https://bugs.webkit.org/show_bug.cgi?id=216979

Description Karl Dubost 2022-11-16 23:21:58 PST
Steps to reproduce 
1. Go to http://wpt.live/html/semantics/embedded-content/the-img-element/image-loading-lazy-available.html
2. Scroll to the bottom

Expected:
PASS

Actual: 
FAIL


https://wpt.fyi/results/html/semantics/embedded-content/the-img-element/image-loading-lazy-available.html


The image which is added to the DOM is in the cache already, but it is not added until scrolling. 
And when the image is being finally reached, it downloads it again with a 200, instead of reusing the cached image.
Comment 1 Radar WebKit Bug Importer 2022-11-16 23:22:09 PST
<rdar://problem/102453623>
Comment 3 Karl Dubost 2022-11-20 18:12:24 PST
ha interesting in 
https://html.spec.whatwg.org/multipage/images.html#the-list-of-available-images


> 4.8.4.3.3 The list of available images
> 
> Each Document object must have a list of available images. Each image in this list is identified by a tuple consisting of an absolute URL, a CORS settings attribute mode, and, if the mode is not No CORS, an origin. 


There is a note:

> The list of available images is intended to enable synchronous switching when changing the src attribute to a URL that has previously been loaded, and to avoid re-downloading images in the same document even when they don't allow caching per HTTP. It is not used to avoid re-downloading the same image while the previous image is still loading.


And in https://html.spec.whatwg.org/multipage/images.html#updating-the-image-data

Step 6.3

> If the list of available images contains an entry for key, then:
> 
> * Set the ignore higher-layer caching flag for that entry.
> 



And this is a similar test case
http://wpt.live/html/semantics/embedded-content/the-img-element/image-loading-lazy-use-list-of-available-images.html
https://wpt.fyi/results/html/semantics/embedded-content/the-img-element/image-loading-lazy-use-list-of-available-images.html
Comment 4 Karl Dubost 2022-11-20 18:28:45 PST
I also opened https://github.com/whatwg/html/issues/8524
to be double sure.
Comment 5 Karl Dubost 2022-11-23 16:42:40 PST
Confirmed 

1. The image should be reused. 
   https://github.com/whatwg/html/issues/8524
2. The two WPT tests are duplicates with the second one being probably better.
   https://wpt.fyi/results/html/semantics/embedded-content/the-img-element/image-loading-lazy-available.html
   https://wpt.fyi/results/html/semantics/embedded-content/the-img-element/image-loading-lazy-use-list-of-available-images.html


According to the specification:
https://html.spec.whatwg.org/multipage/images.html#the-list-of-available-images


The browser should build a list of available images with the following parameters/requirements.

Each Document object must have a list of available images:
 
* Each image in this list is identified by a tuple consisting of an 
  * absolute URL, 
  * a CORS settings attribute mode, 
  * and, if the mode is not No CORS, an origin.
* Each image furthermore has an ignore higher-layer caching flag.


When switching to another Document:

* User agents may copy entries from one Document object's list of available images to another at any time (e.g. when the Document is created, user agents can add to it all the images that are loaded in other Documents), 
* but must not change the keys of entries copied in this way when doing so, 
* and must unset the ignore higher-layer caching flag for the copied entry.


* User agents may also remove images from such lists at any time (e.g. to save memory).
* User agents must remove entries in the list of available images as appropriate given higher-layer caching semantics for the resource (e.g. the HTTP `Cache-Control` response header) when the ignore higher-layer caching flag is unset.


AND as a Note

The list of available images is intended to enable synchronous switching when changing the src attribute to a URL that has previously been loaded, and to avoid re-downloading images in the same document even when they don't allow caching per HTTP. It is not used to avoid re-downloading the same image while the previous image is still loading.

AND Note

The user agent can also store the image data separately from the list of available images.