必须用lay-src+占位src+done回调手动调用flow.lazyimg()三者缺一不可:templet中src设为base64空gif或loading图,lay-src存真实URL;done中定位表格内img并传入flow.lazyimg({elem:$imgs});reload时需重复执行。
直接在 templet 里写 <img src="{{d.url}}">,图片会全部立刻请求,根本没懒加载这回事。必须用 lay-src + 占位 src + 手动接管扫描,三者缺一不可。
templet 中必须用 lay-src 而不是 src
浏览器只要看到 src 属性非空,就会立即发起 HTTP 请求——不管这张图是否在视口里。所以你得把真实地址存到 lay-src,src 只能是占位图或空值。
-
src推荐设为 base64 空 gif:src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" - 或者指向一个轻量 loading 图:
src="/images/loading.gif" -
lay-src存真实 URL:lay-src="{{d.avatar}}" - 千万别写成
src="{{d.avatar}}",否则懒加载完全失效
table.done 回调里必须手动调用 flow.lazyimg()
layui 表格是动态渲染的,img 标签在 done 回调执行时才真正插入 DOM。而 flow.lazyimg() 默认只扫描初始页面已存在的元素,不会监听后续插入的节点。
- 不能在
table.render()外部提前调用flow.lazyimg() - 必须在
done里定位到当前表格区域的图片:elem.next('.layui-table-box').find('img[lay-src]') - 显式传入这个集合:
flow.lazyimg({ elem: $imgs }),避免全页扫描、重复绑定 - 如果表格支持
reload(比如搜索重载),每次done都要再执行一遍
滚动容器必须有明确尺寸和溢出行为
flow.lazyimg() 依赖 getBoundingClientRect() 判断是否进入视口,而这个 API 要求父容器具备滚动上下文。layui 表格默认靠 .layui-table-body 实现内部滚动,但一旦你设了 height: 'auto' 或没设 height,它就失去滚动能力。
-
scrolly必须设具体数值,如height: 400,不能是'auto' - 检查
.layui-table-body是否有overflow-y: auto(Layui 默认有,但自定义样式可能覆盖) - 移动端 Safari 需额外加
-webkit-overflow-scrolling: touch,否则滚动事件不触发,懒加载判定失效 - 控制台若报
Cannot read property 'getBoundingClientRect' of null,大概率是选择器没匹配到元素,或容器还没渲染完成
最容易被忽略的是:表格 reload 后,新生成的 img 不会自动被 lazyimg 绑定——哪怕你第一次调用成功了。每次数据重绘都得重新扫一遍对应区域,这是动态表格和静态页面最本质的区别。


















