表格图片列触发懒加载需在layui表格done回调中调用flow.lazyimg()限定选择器扫描,如flow.lazyimg({elem: '#myTable .gallery-img img'}),且templet中须用data-src存真实URL、src设占位图,reload后需重新调用以绑定新DOM。
表格图片列怎么触发懒加载,而不是一打开就全量请求
layui 表格本身不接管图片资源加载,lay-src 或 data-src 不会被自动识别。所谓“滚动到可视区域才加载”,本质是监听图片是否进入视口,再把 data-src 的值赋给 src。这和表格是否启用 scrolly 无关,关键在图片 dom 是否已渲染、是否可被检测。
- 必须在表格
done回调里执行懒加载初始化,否则img元素还没生成,flow.lazyimg()扫不到 - 不要直接用
flow.lazyimg({elem: 'img'})—— 它会扫描全页img,包括表头、弹窗里的图,容易重复绑定或干扰其他模块 - 推荐限定范围:
flow.lazyimg({elem: '#myTable .gallery-img img'}),其中.gallery-img是你在templet里给图片容器加的 class - 如果表格支持 reload(比如搜索后刷新),每次 reload 后必须重新调一次
flow.lazyimg(),否则新插入的图片不会响应
为什么 flow.lazyimg() 绑定了却没效果
最常见原因是容器没有形成滚动上下文,或者图片还没真正出现在 DOM 中。flow 检测视口依赖 getBoundingClientRect(),而这个 API 要求目标元素父级有明确尺寸和 overflow-y: auto。
-
layui-table-body默认有overflow-y: auto,但如果你设了height: 'auto'或没设height,它就失去滚动能力,flow.lazyimg()无法判断“是否进入视口” - 检查浏览器控制台是否报错
Cannot read property 'getBoundingClientRect' of null—— 这说明你传的elem选择器没匹配到任何元素,可能是选择器写错,或 DOM 尚未就绪 - 避免在
table.render()前就调flow.lazyimg();也不要在$(document).ready()里急着调,得等done执行完再触发 - 移动端 Safari 需额外加
-webkit-overflow-scrolling: touch到layui-table-body,否则滚动事件不灵敏,懒加载判定失效
templet 里怎么写才能让图片支持懒加载
不能只写 <img src="%7Bd.thumbUrl%7D">。必须把真实地址存在 data-src,初始 src 设为空或占位图,否则浏览器会在 DOM 插入瞬间发起请求。
{field: 'avatar', title: '头像', templet: function(d){
return '<div class="gallery-img">' +
'@@##@@' +
'</div>';
}}
-
src必须是一个能立即加载的小图(如 1×1 透明 GIF 或 base64 占位图),否则仍会触发网络请求 -
data-src存的是高清图地址,等flow.lazyimg()触发后才会赋值给src - 别用
lay-src—— layui 的lay-src是为layui.upload或layui.carousel设计的,table 不识别该属性
reload 后新图片不加载,手动触发也无效怎么办
reload 会销毁旧 DOM 并重建,之前绑定的懒加载监听全部丢失。这不是 bug,是预期行为 —— flow.lazyimg() 只扫描一次,不监听 DOM 变化。
- 在
table.reload()的done回调末尾,立刻补一句:flow.lazyimg({elem: '#myTable .gallery-img img'}); - 如果用了分页或筛选,每次数据变更都属于“新 DOM”,都要重扫,不能省略
- 避免在
done里嵌套异步操作(如setTimeout)后再调lazyimg(),会导致扫描时机错位;确保img已真实 append 到 tbody 再扫描 - 调试时可用
console.log($('[data-src]').length)确认目标元素是否存在,再决定是否调用lazyimg()











