附件缩略图懒加载

长列表图片的请求风暴

在开发包含大量客户附件缩略图的页面时，如果直接将所有图片地址写入 src 属性，浏览器会在短时间内发起大量网络请求。这不仅会导致首屏加载缓慢，还会白白消耗服务器带宽和用户的流量。

视口触发的按需加载

为了解决这个问题，该技能基于 lozad 库实现了附件缩略图的懒加载机制。核心思路是将真实的图片地址存放在 data-src 属性中，而不是一开始写满 src。当页面挂载完成后，通过 lozad().observe() 监听这些占位元素。只有当缩略图滚动进入用户的可视区域时，才会真正发起图片请求。

关键步骤与注意事项

• 属性替换：在模板中务必使用 data-src 存放大图地址，并给元素添加 lozad class。
• 动态节点追加：如果列表支持分页或无限滚动，在动态插入新的 DOM 节点后，必须再次调用 observe 方法。
• 联动测量：若配合 imagesLoaded 测量图片高度，需确保在懒加载触发后再执行，避免顺序颠倒导致永远等不到图。

适用边界

该技能专注于图片的按需加载，不包含任何图片压缩或转码服务。此外，请避免将所有缩略图直接写入 src 却声称是懒加载，这违背了该方案的初衷。