关于图片懒加载后src属性不一致及未显示1px占位图的咨询

为什么原始src和浏览器显示的src不一致？ #

这是因为你使用的lazyload JavaScript脚本在浏览器运行时主动修改了DOM元素：

• 原始代码里，src指向1px占位图、data-src存储真实图片地址、class标记为lazyload，这是给懒加载脚本的触发标识。
• 当页面加载到该图片，或者图片进入浏览器视口时，懒加载脚本会自动把data-src的值赋值给src，同时把class改成lazyloaded——这样浏览器就会加载并显示真实图片，完成懒加载逻辑。
• 你在浏览器里查看的“源码”是当前页面的实时DOM状态，而非服务器返回的原始HTML，所以看到的是脚本修改后的结果。

为什么桌面端浏览器源码里看不到1px占位图？ #

因为懒加载脚本已经完成了替换操作：

• 你观察到的“先加载占位图再显示实际图片”是脚本执行前的短暂状态，这个过程非常快，等你打开开发者工具查看DOM时，脚本已经把src替换成了真实图片地址，占位图的地址被覆盖，自然看不到了。
• 若想验证占位图确实被加载过，可以打开浏览器开发者工具的「网络」面板，筛选图片请求，就能看到1px占位图和真实图片的加载顺序。

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