loading="lazy"在<table>中不生效，因浏览器对表格子元素懒加载支持弱；应将图片移出表格用position: absolute叠加，或用IntersectionObserver手动控制加载，并确保width/height或aspect-ratio防止布局偏移。
loading="lazy" 在 table 中不生效的典型表现
直接给 <img> 加 loading="lazy" 却发现图片依然立即加载，尤其当它位于 <table> 内部（比如在 <td> 或 <tr> 里）时——这不是你代码写错了，而是浏览器对表格布局的懒加载支持极弱。Chrome 109+ 虽宣称支持 loading="lazy"，但实际对 <table> 的子元素（尤其是嵌套较深的 <img>）会忽略该属性，直接触发加载。
绕过 table 布局限制的实操方案
核心思路：不让 <img> 成为 <table> 的直系后代。用 CSS 将图片“抽离”出表格流式布局，同时保持视觉位置不变。
- 把图片移出
<table>，放在<div>容器中，用position: absolute叠加到对应单元格上方 - 给目标
<td>设position: relative，作为定位上下文 - 确保
<img>有loading="lazy"和明确的width/height（防止 layout shift） - 避免用
display: table-cell模拟表格——这同样会破坏懒加载
<table>
<tr>
<td style="position: relative;">
文字内容
<div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;">
<img src="photo.jpg" loading="lazy" width="200" height="150" alt="">
</div>
</td>
</tr>
</table>
替代方案：用 IntersectionObserver 手动控制加载
当图片必须保留在 <table> 内部结构中（例如 CMS 输出不可改），loading="lazy" 失效时，手动监听进入视口更可靠。
- 给图片加
data-src存真实地址，src留空或设占位图 - 用
IntersectionObserver监听<img>是否进入视口，触发后赋值src - 注意：需为
<img>设置固定尺寸（如width/height或 CSSaspect-ratio），否则滚动时可能抖动 - 兼容性：IE 不支持，需 polyfill 或降级处理
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const img = entry.target;
img.src = img.dataset.src;
observer.unobserve(img);
}
});
});
document.querySelectorAll('table img[data-src]').forEach(img => observer.observe(img));
容易被忽略的细节：width/height 和 layout shift
哪怕 loading="lazy" 生效了，如果图片没声明尺寸，浏览器无法预留空间，滚动时会引发布局偏移（layout shift），影响 CLS 指标。
立即学习“前端免费学习笔记（深入）”；
-
<img>必须有width和height属性（不是仅 CSS）——这是 HTML 规范中 lazy 加载的隐含前提 - 响应式场景下，用
width/height+aspect-ratioCSS 更稳妥：style="aspect-ratio: 4/3; width: 100%;" - 表格单元格本身若无固定宽高，
position: absolute定位的图片可能错位——优先给<td>设min-height或height
表格里的懒加载从来不是加个属性就能完事的事，关键在绕过渲染引擎对 table 布局的特殊处理逻辑。真正起作用的，往往是那个藏在 position: absolute 后面的尺寸声明和 observer 的时机判断。
