现代浏览器（Chrome 76+、Edge 79+、Firefox 75+、Safari 15.4+）已原生支持loading="lazy"，但iOS Safari 15.4前及微信旧版WebView不识别；仅对<img>和<iframe>生效，须配合src/srcset使用，且需确保图片有明确宽高以防误加载。
img loading="lazy" 浏览器原生懒加载是否可用
现代浏览器（Chrome 76+、Edge 79+、Firefox 75+、Safari 15.4+）已原生支持 loading 属性，但兼容性仍有缺口。iOS Safari 在 15.4 之前完全不识别该属性，且部分 Android WebView（如微信内置浏览器旧版本）会忽略它。启用后，loading="lazy" 仅对 <img> 和 <iframe> 生效，其他元素无效。
- 必须配合
src或srcset使用，否则无实际加载行为 - 不支持动态插入的图片自动触发懒加载，需手动设置属性后再挂载到 DOM
- 若图片在视口内初始渲染时已满足加载条件，浏览器可能仍会立即加载（非强制延迟）
-
loading="eager"可显式关闭懒加载，用于首屏关键图
loading="lazy" 和 IntersectionObserver 手动实现的区别
原生 loading 是浏览器级优化，由渲染引擎直接控制资源请求时机；而 IntersectionObserver 是 JS 层监听滚动 + 手动替换 src，可控性更强但有额外开销。
- 原生方案无需 JS，无 FOUC 风险，也无监听器注册/销毁逻辑
-
IntersectionObserver可自定义阈值、根容器、延迟回调，还能配合占位图、错误重试、渐入动画 - 原生不提供加载状态反馈（如 loading 中、加载失败），JS 方案可精确捕获
onload/onerror - 某些场景下（如瀑布流中图片高度未知），原生 lazy 可能误判位置，导致提前或延迟加载
哪些图片不该加 loading="lazy"
不是所有图片都适合懒加载。加了反而影响体验或 SEO。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 首屏核心内容中的图片（如 banner、logo、商品主图）应设为
loading="eager"或直接省略该属性 - 通过 CSS
background-image加载的图片不受loading属性控制，此属性只作用于 HTML<img>的src -
srcset+sizes组合使用时，loading="lazy"依然生效，但需确保各尺寸资源路径有效，否则 fallback 失败 - 服务端渲染（SSR）页面中，若首屏图片被标记 lazy，部分搜索引擎爬虫（尤其旧版）可能不抓取，建议首屏图片保留 eager
实际部署时容易忽略的细节
loading="lazy" 看似简单，但上线后常因边缘情况出问题。
立即学习“前端免费学习笔记（深入）”；
- 图片 URL 含查询参数（如
image.jpg?version=2）时，缓存策略需同步更新，否则 lazy 加载可能命中过期资源 - 使用 CDN 时，确认其未主动 strip 掉
loading属性（某些 HTML 压缩中间件会过滤未知属性） - Vue/React 等框架中，用 v-bind 或 JSX 动态绑定时写法要正确：
:loading="isLazy ? 'lazy' : 'eager'，不能写成:loading="isLazy"（布尔值会被转成字符串 "true"/"false"，无效） - 开发环境 Chrome DevTools 的 Network 面板默认不显示 lazy 延迟发起的请求，需勾选 “Disable cache” 并滚动触发，或在 Elements 面板观察
src是否被浏览器自动填充
真正起效的关键不在属性有没有写上，而在图片是否具备可计算的布局高度——如果父容器或图片自身没宽高，浏览器无法预估位置，可能跳过懒加载逻辑直接加载。
