Firefox DevTools网络瀑布图重复加载头部图片问题求助

现象描述 #

• Chrome表现正常：仅加载匹配当前视口的图片版本，预加载资源在瀑布图中优先级极高
• Firefox存在两个核心问题：
  • 匹配视口的正确图片加载时机极晚、优先级低，被标记为「imageset」
  • 错误预加载桌面默认大图（采用桌面优先策略），标记为「lazy-imageset」，但页面未使用懒加载，导致图片占位区域长时间空白

问题推测 #

根据资料分析，问题根源可能是Firefox的预加载扫描器在视口尺寸确定前就已启动，导致<link preload>的媒体查询与<picture>内<source>的媒体查询匹配逻辑出现偏差。

已尝试的无效操作 #

• 删除<picture>中<img>标签的src属性
• 移除桌面默认图预加载标签的media="(min-width: 961px)"属性，并添加imagesizes="930px, 1860px"

相关代码 #

Picture标签结构 #

<picture> 
<source media="(max-width: 429px)" srcset="430x172-1x.jpg 1x, 860x344-2x.jpg 2x" width="430" height="172">
<source media="(min-width: 430px) and (max-width: 499px)" srcset="500x200-1x.jpg 1x, 1000x400-2x.webp 2x" width="500" height="200">
<source media="(min-width: 500px) and (max-width: 670px)" srcset="670x268-1x.jpg 1x, 1340x536-2x.webp 2x" width="670" height="268">
<source media="(min-width: 671px) and (max-width: 829px)" srcset="930x372schmal-1x.webp 1x, 1395x558-15x.webp 1.5x" width="930" height="372">
<source media="(min-width: 830px) and (max-width: 960px)" srcset="930x372schmal-1x.webp 1x, 1395x558-15x.webp 1.5x" width="930" height="372">
<img class="..." src="930x300breit-1x.webp" srcset="930x300breit-1x.webp 1x, 1860x600breit-2x.webp 2x" width="930" height="300" alt="...">
</picture>

Preload预加载标签 #

<link rel="preload" as="image" fetchpriority="high" media="(max-width: 429px)" imagesrcset="430x172-1x.jpg 1x, 860x344-2x.jpg 2x">
<link rel="preload" as="image" fetchpriority="high" media="(min-width: 430px) and (max-width: 499px)" imagesrcset="500x200-1x.jpg 1x, 1000x400-2x.webp 2x">
<link rel="preload" as="image" fetchpriority="high" media="(min-width: 500px) and (max-width: 670px)" imagesrcset="670x268-1x.jpg 1x, 1340x536-2x.webp 2x">
<link rel="preload" as="image" fetchpriority="high" media="(min-width: 671px) and (max-width: 829px)" imagesrcset="930x372schmal-1x.webp 1x, 1395x558-15x.webp 1.5x">
<link rel="preload" as="image" fetchpriority="high" media="(min-width: 830px) and (max-width: 960px)" imagesrcset="930x372schmal-1x.webp 1x, 1395x558-15x.webp 1.5x">
<!-- default-img desktop, desktop-first  -->
<link rel="preload" as="image" fetchpriority="high" imagesrcset="930x300breit-1x.webp 1x, 1860x600breit-2x.webp 2x">

Firefox DevTools瀑布图截图 #

内容的提问来源于stack exchange，提问作者Martinus33