把别人的商品页另存下来改，图片全是灰块；右键另存，只得到一个 1×1 的 gif。打开源码一看，img 标签的 src 指向占位图，真实地址写在 data-original 上。
这个属性的来历
早期用 jQuery.lazyload 做懒加载，约定 src 放一张 loading 图，data-original 放真图地址，页面滚动到位置时脚本再把值赋给 src。浏览器不认识 data-original，所以首屏之外的图不会发请求，省流量也省内存。这套约定后来被大量主题和 CMS 沿用，一直留到现在。
为什么图不显示
JavaScript 没跑起来，或者脚本依赖的 jQuery 加载失败，data-original 就永远停在属性里。常见的情形是懒加载脚本放在页面末尾，前面某段代码先抛了错，后面的逻辑整段不执行，图就全停在占位状态。抓取工具、邮件客户端、部分阅读模式同样不执行脚本，看到的自然是灰块。打印页面丢图，原因一样。
现在更推荐的做法
原生 loading 属性一行搞定，Chrome、Edge、Safari 都支持，不用写脚本。需要更精细的控制就用 IntersectionObserver，元素进入视口再把 data-src 换成 src。新项目没必要再引 lazyload 插件，维护成本比省下的几 KB 高。
<img src='placeholder.png' data-original='real.jpg' alt='产品图' loading='lazy'>迁移时注意
搜索引擎抓不到懒加载的图，首屏关键图直接写 src，别偷这点流量。做 SEO 的话，列表页前几张图老老实实同步加载。旧站改造可以在 noscript 里补一个真实 img，脚本失效时也看得见。
看到 data-original 就知道这站用的是老方案，取图时把属性值拿出来就行。自己写页面，除非要兼容很老的浏览器，别再走这条路。批量替换属性之前先备份，改错一次整站图片全白。