在 <picture> 标签中预加载响应式图片

如何解决在 <picture> 标签中预加载响应式图片

我需要预加载在 <picture> 标签中设置的响应式图片：

<picture> <source sizes="(max-width: 320px) 320px,(max-width: 480px) 480px,(max-width: 768px) 768px,>(max-width: 1024px) 1024px,(max-width: 1200px) 1200px,1500px" srcset="home-image1-bis2-1200x640.webp 1200w,home-image1-bis2-1024x546.webp 1024w,home-image1-bis2-768x410.webp 768w,home-image1-bis2-480x256.webp 480w,home-image1-bis2-320x171.webp 320w,home-image1-bis2.webp 1500w" type="image/webp"> </picture>

我找到了这个链接：https://web.dev/preload-responsive-images/

所以我尝试在下面应用它：

<link rel="preload" href=home-image1-bis2-320x171.webp" as="image" type="image/webp" media="(max-width: 320px)"> <link rel="preload" href="home-image1-bis2-480x256.webp" as="image" type="image/webp" media="(min-width: 320.1px) and (max-width: 480px)"> <link rel="preload" href="home-image1-bis2-768x410.webp" as="image" type="image/webp" media="(min-width: 480.1px) and (max-width: 768px)">
``<link rel="preload" href="home-image1-bis2-1024x546.webp" as="image" type="image/webp" media="(min-width: 768.1px) and (max-width: 1024px)"> <link rel="preload" href="home-image1-bis2-1024x546.webp" as="image" type="image/webp" media="(min-width: 1024.1px) and (max-width: 1200px)">
``<link rel="preload" href="home-image1-bis2.webp" as="image" type="image/webp" media="(min-width: 1200.1px)">

我不确定它是否有效...

我现在在控制台中有这个通知：

The resource home-image1-bis2-480x256.webp was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate 作为 value and it is preloaded intentionally.

这对这张图片的 LCP 没有影响。

有人知道怎么做吗？

非常感谢！

解决方法

您可以在此用例中使用 function searchForWaldo(arrayOfNames) { return containsWaldo(arrayOfNames) ? 'I found waldo!' ? 'I couldn't find waldo...' } 和 imagesrcset 属性：

imagesizes

见https://html.spec.whatwg.org/multipage/semantics.html#attr-link-imagesrcset
和https://html.spec.whatwg.org/multipage/semantics.html#attr-link-imagesizes