使用new Image().srcset预加载图片，浏览器是否支持响应式加载？

核心需求 #

• 明确各浏览器通过JavaScript创建new Image()实例并设置srcset时的处理逻辑
• 核心关注点：浏览器是否会根据指定条件仅下载符合当前视口尺寸的必要图片文件
• 目标：在不将图片附加到DOM的前提下实现预加载，同时保证srcset的响应式加载功能随视口尺寸正常工作

参考代码示例 #

let img = new Image();
img.srcset = "https://images.placeholders.dev/?width=320&height=200&text=320w 320w, " +
             "https://images.placeholders.dev/?width=480&height=300&text=480w 480w, " +
             "https://images.placeholders.dev/?width=800&height=500&text=800w 800w";
img.sizes = "(max-width: 320px) 280px, (max-width: 480px) 440px, 800px";
img.src = "https://images.placeholders.dev/?width=1500&height=1500&text=1500w"; // Fallback source

测试过程与结果 #

测试步骤

1. 在新标签页中执行上述代码
2. 打开浏览器开发者工具的网络面板，禁用缓存
3. 通过开发者工具将设备宽度设置为300px
4. 查看网络面板中实际请求的图片版本

各浏览器测试结果

Chrome 120

• ❌ 实际请求480px版本，而非预期的320px版本
• ✅ 当视口宽度＞800px时，正常请求800px版本

Firefox 130

• ❌ 实际请求800px版本，而非预期的320px版本
• 观察发现该浏览器似乎始终请求800px版本

补充邀请

欢迎补充你的测试结果，帮助完善不同浏览器的兼容性情况。

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