Layui表格图片懒加载需在table.done回调中手动调用flow.lazyimg({elem: $imgs})，因动态渲染的img不在初始DOM中；templet中须用lay-src而非src，并配合占位图；reload时需isClear清理旧绑定。
表格内图片列无法直接用 layui.flow.lazyimg() 实现懒加载 —— 因为该方法只作用于 dom 中已存在的 img[lay-src] 元素，而 layui 表格的 td 内容是动态渲染的字符串或函数返回值，lazyimg() 初始化时根本看不到这些图片。
为什么 table.render() 后调用 flow.lazyimg() 不生效
表格单元格里的 img 标签是在 done 回调或 templet 函数中拼出来的，属于“后续插入”，不是页面初始 HTML。而 flow.lazyimg() 默认只扫描初始化时已存在的元素，不会监听 DOM 变化。
- 常见错误现象：
lay-src正确写了，但图片始终不加载，src也没被替换 - 根本原因：表格重绘（如
table.reload()）后，新生成的img没被flow.lazyimg()重新接管 - 必须在每次数据渲染完成、
img真实插入 DOM 后，手动触发一次懒加载扫描 -
flow.lazyimg()的elem参数要精确指向表格内的img，不能写成'img[lay-src]'这种全局选择器（否则会重复绑定、性能差）
在 table.done 回调里重新执行 flow.lazyimg()
把懒加载逻辑下沉到表格渲染完成的时机，确保每次新行插入后都补扫一遍对应区域的图片。
- 在
table.render()的done回调中，用 jQuery 找到当前表格容器内的所有待懒加载图片：elem.next('.layui-table-box').find('img[lay-src]') - 显式传入这个集合给
flow.lazyimg({ elem: $imgs })，避免重复绑定已有图片 - 如果表格支持翻页或 reload，每次
done都要执行一遍 —— 不是“初始化一次就够了” - 示例片段：
done: function(res, curr, count){
var $tableBox = elem.next('.layui-table-box');
var $imgs = $tableBox.find('img[lay-src]');
layui.use('flow', function(){
var flow = layui.flow;
flow.lazyimg({ elem: $imgs });
});
}
templet 列中正确使用 lay-src 而非 src
这是最易出错的一环：很多人在 templet 里直接写 <img src="{{d.avatar}}">，这会让浏览器立即发起请求，完全绕过懒加载。
- 必须改用
lay-src属性，且保留src为占位图（如src="/images/loading.gif"或空白src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="） - templet 示例：
templet: function(d){
return '<img src="/images/loading.gif" lay-src="' + (d.avatar || '') + '" width="40" height="40" alt="">';
}
- 如果后端可能返回空 avatar，记得加默认占位，否则
lay-src=""会导致报错或异常行为 - 不要在 templet 里写
onload或其他 JS 逻辑干扰 flow 的接管流程
reload 场景下避免重复绑定和内存泄漏
表格频繁 reload（比如搜索、筛选）时，若每次都在 done 里无差别调用 flow.lazyimg()，旧的监听器不会自动销毁，可能造成重复加载、CPU 升高甚至图片闪动。
- 每次执行前先清理上一轮绑定：
flow.lazyimg({ elem: $imgs, isClear: true })（Layui 2.6+ 支持isClear参数） - 若用的是老版本（如 2.5.6），需手动解绑：在
done开头加$imgs.removeData('lay-lazy')或用$imgs.off('load')（取决于 flow 内部实现） - 更稳妥的做法：用唯一 class 标识懒加载区域，例如给每张图加
class="lazy-img-{{d.id}}"，reload 前先移除所有带该 class 的绑定痕迹 - 注意：
flow.lazyimg()不会自动监听页面滚动事件代理，它靠的是自身维护的 IntersectionObserver 或定时检测，所以无需额外监听 scroll
真正麻烦的不是“怎么启动懒加载”，而是“怎么确保它在表格各种生命周期里持续有效又不打架”。尤其当表格开启 height、使用 scrollY、配合分页 reload 时，DOM 插入时机、滚动容器归属、事件绑定范围都得对得上号 —— 差一个 .next('.layui-table-box')，就全白搭。
