248025 2022-11-16 23:21:58 -0800 Dynamically added loading="lazy" image when already is not reusing the cached image when available 2022-11-23 16:42:57 -0800 1 1 1 Unclassified WebKit Images Safari Technology Preview Unspecified Unspecified NEW https://bugs.webkit.org/show_bug.cgi?id=216979 https://wpt.fyi/results/html/semantics/embedded-content/the-img-element/image-loading-lazy-available.html BrowserCompat, InRadar, WPTImpact P2 Normal --- 1 karlcow webkit-unassigned cdumez sabouhallawa webkit-bug-importer oldest_to_newest 1913100 0 karlcow 2022-11-16 23:21:58 -0800 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. 1913101 1 webkit-bug-importer 2022-11-16 23:22:09 -0800 <rdar://problem/102453623> 1913104 2 karlcow 2022-11-16 23:31:58 -0800 There is also https://wpt.fyi/results/html/semantics/embedded-content/the-img-element/image-loading-lazy-use-list-of-available-images.html 1913789 3 karlcow 2022-11-20 18:12:24 -0800 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 1913790 4 karlcow 2022-11-20 18:28:45 -0800 I also opened https://github.com/whatwg/html/issues/8524 to be double sure. 1914399 5 karlcow 2022-11-23 16:42:40 -0800 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.