HTML文件本身不支持懒加载,所谓“懒加载”实为对页面内img、iframe等外部资源的按需加载;Layui仅通过flow.lazyimg()支持图片懒加载,需配合lay-src与占位src实现。

全站静态 HTML 资源本身无法“懒加载”——HTML 文件是浏览器一次性解析执行的,不存在分段加载机制。所谓“全站静态资源懒加载”,实际是指对页面内引用的 <img>、<iframe>、<script>、CSS 中的 background-image 等**外部资源**做按需加载控制。Layui 并不提供全局静态资源调度器,它的懒加载能力集中在 flow.lazyimg() 和部分组件的动态加载逻辑中。
为什么不能直接对 HTML 文件做懒加载
浏览器请求一个 HTML 文件后,会同步解析其 DOM 树、阻塞式加载 <link rel="stylesheet">、异步/延迟加载 <script>,但整个 HTML 文本内容必须先完整下载并解析完毕。你无法让浏览器只加载首屏 HTML、滚动后再拉取下半页 HTML —— 这属于 SPA 或服务端流式渲染(streaming SSR)范畴,和 Layui 的静态页面模型不匹配。
常见误解:把“表格里图片不立即加载”当成“HTML 懒加载”。其实只是 DOM 渲染后,用 JS 延迟触发图片请求而已。
lay-src + flow.lazyimg() 是唯一可行的图片懒加载路径
Layui 表格、弹层、树形组件等动态生成的区域,图片必须走 lay-src + 占位 src + flow.lazyimg() 三件套,否则浏览器一见 src 就发请求。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图,自动匹配视觉风格。触发场景:文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记(深入)”;
-
templet中写:<img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" lay-src="{{d.url}}"> -
table.render()的done回调里必须执行:layui.use('flow', function(){ flow.lazyimg({ elem: $tableBox.find('img[lay-src]') }); }); - 每次
table.reload()后,done都要重跑一遍 —— 新<img>不在初始 DOM 里,flow.lazyimg()不会自动扫描新增节点 - 如果用了自定义滚动容器(如
.my-scroll),需显式传scrollElem: '.my-scroll',否则视口判断失效
iframe 和 script 的懒加载得自己接管
Layui 没有封装 <iframe> 或 <script> 的懒加载逻辑,需手动结合 IntersectionObserver 或滚动监听:
- 给
<iframe>设空src或about:blank,用data-src存真实地址;进入视口后才赋值iframe.src = iframe.dataset.src - 动态
<script>加载推荐用layui.loader(非官方模块,需自行封装)或原生document.createElement('script')+onload控制时机 - 避免在
templet里直接写<script src="xxx.js"></script>,这会导致每次渲染都重复加载 - 第三方统计、客服插件等非关键脚本,建议放在
window.addEventListener('load', ...)或滚动到底部后触发
容易被忽略的兼容性与性能雷区
移动端 Safari 对 overflow-y: auto 容器的滚动事件支持脆弱,flow.lazyimg() 依赖 getBoundingClientRect() 判断位置,若父容器没正确触发滚动上下文,就会报 Cannot read property 'getBoundingClientRect' of null。
-
.layui-table-body必须有固定height(如height: 400),不能是auto或max-height - 自定义样式覆盖了
overflow-y: auto或漏掉-webkit-overflow-scrolling: touch,会导致 iOS 上懒加载完全不触发 - 全局用
flow.lazyimg({ elem: 'img[lay-src]' })会重复绑定已处理过的图片,造成内存泄漏和重复请求 - 表格列数多、行数大时,
$tableBox.find('img[lay-src]')查找开销明显,建议加 class 限定范围,如img.lazy-img[lay-src]


















