Bug 248025 – Dynamically added loading="lazy" image when already is not reusing the cached image when available

• Status: NEW
• Component: Images

[Karl Dubost]

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.

[Radar WebKit Bug Importer]

<rdar://problem/102453623>

[Karl Dubost]

There is also 
https://wpt.fyi/results/html/semantics/embedded-content/the-img-element/image-loading-lazy-use-list-of-available-images.html

[Karl Dubost]

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

[Karl Dubost]

I also opened https://github.com/whatwg/html/issues/8524
to be double sure.

[Karl Dubost]

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.