preload - 预加载响应式图像
问题描述
我需要预加载在<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)">
它似乎不起作用,控制台现在也记录了这个通知:
资源home-image1-bis2-480x256.webp是使用链接预加载预加载的,但在窗口加载事件后的几秒钟内未使用。请确保它具有适当的
as
值并且是有意预加载的。
而且这对灯塔分数的LCP没有影响。
如何正确加载图像?
解决方案
您可以在此用例中使用imagesrcset
和属性:imagesizes
<link
rel="preload"
as="image"
type="image/webp"
imagesrcset="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"
imagesizes="(max-width: 320px) 320px, (max-width: 480px) 480px, (max-width: 768px) 768px, (max-width: 1024px) 1024px, (max-width: 1200px) 1200px, 1500px"
>
请参阅https://html.spec.whatwg.org/multipage/semantics.html#attr-link-imagesrcset
和https://html.spec.whatwg.org/multipage/semantics.html#attr-link-imagesizes
推荐阅读
- php - curl php HTTP/2 流 0 未完全关闭
- java - Java 索引越界异常索引:2,大小:2
- c# - 使用 Razor 时如何在每个请求处传输 JWT 令牌(.NET CORE 2.2 MVC)
- php - 如何从侧边栏中获取特定的小部件(我想要谷歌评论小部件)?
- scala - -Xfatal-warnings 下不会产生任何警告
- java - 第一个列表在回收站视图中消失消失
- angular - *ngif 未绑定到页面上的变量
- javascript - 尝试读取 MYSQL 查询的结果时无法读取未定义的属性“长度”
- javascript - 在等待响应之前触发打字稿返回
- python - 如何将 jinja2 变量插入到 html 元素的属性中?