html文件本身不支持懒加载，所谓“懒加载”实为对页面内img、iframe等外部资源的按需加载；layui仅通过flow.lazyimg()支持图片懒加载，需配合lay-src与占位src实现。
全站静态 HTML 资源本身无法“懒加载”——HTML 文件是浏览器一次性解析执行的，不存在分段加载机制。所谓“全站静态资源懒加载”，实际是指对页面内引用的 <img>、<iframe></iframe>、<script></script>、CSS 中的 background-image 等**外部资源**做按需加载控制。Layui 并不提供全局静态资源调度器，它的懒加载能力集中在 flow.lazyimg() 和部分组件的动态加载逻辑中。
为什么不能直接对 HTML 文件做懒加载
浏览器请求一个 HTML 文件后，会同步解析其 DOM 树、阻塞式加载 <link rel="stylesheet">、异步/延迟加载 <script></script>，但整个 HTML 文本内容必须先完整下载并解析完毕。你无法让浏览器只加载首屏 HTML、滚动后再拉取下半页 HTML —— 这属于 SPA 或服务端流式渲染（streaming SSR）范畴，和 Layui 的静态页面模型不匹配。
常见误解：把“表格里图片不立即加载”当成“HTML 懒加载”。其实只是 DOM 渲染后，用 JS 延迟触发图片请求而已。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
lay-src + flow.lazyimg() 是唯一可行的图片懒加载路径
Layui 表格、弹层、树形组件等动态生成的区域，图片必须走 lay-src + 占位 src + flow.lazyimg() 三件套，否则浏览器一见 src 就发请求。
-
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></iframe> 或 <script></script> 的懒加载逻辑，需手动结合 IntersectionObserver 或滚动监听：
- 给
<iframe></iframe>设空src或about:blank，用data-src存真实地址；进入视口后才赋值iframe.src = iframe.dataset.src - 动态
<script></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]
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
