Lazysizes.js无法切换响应式图片，该如何排查问题？

我正尝试使用lazysizes.js插件，图片标签配置如下：

<img data-srcset="medium.jpg 768w, small.jpg 634w" data-src="small.jpg 634w" data-size="auto" class="lazyload">

但无论在何种屏幕尺寸下，始终加载medium.jpg图片，请问我遗漏了什么？

问题排查与解决 #

核心问题：data-src属性写法错误 #

data-src仅需填写默认图片的URL，不能附带宽度描述符634w，这个多余的描述符会干扰lazysizes对srcset规则的解析，导致插件优先加载尺寸更大的medium.jpg。

正确的标签配置 #

修正data-src的写法，同时建议把data-srcset中的图片按尺寸从小到大排序（更符合浏览器选择逻辑）：

<img data-srcset="small.jpg 634w, medium.jpg 768w" data-src="small.jpg" data-size="auto" class="lazyload">

额外验证步骤 #

• 确认lazysizes.js文件已正确引入，无加载失败
• 检查页面是否存在其他自定义图片加载脚本，避免和lazysizes冲突
• 用浏览器开发者工具的「网络」面板，切换不同视口尺寸，观察图片请求是否正常切换

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