loading="lazy"在Safari 12支持吗_懒加载兼容性检测【操作】-html教程-PHP中文网

Safari 12 不支持 loading="lazy"，会忽略该属性并按 eager 加载；验证方式是创建 img 元素设 loading="lazy" 后检查其 loading 值是否仍为 "lazy"；不支持时需降级使用 Intersection Observer，注意兼容 rootMargin 正值及避免双加载。

loading="lazy"在safari 12支持吗_懒加载兼容性检测【操作】

不支持。 Safari 12 完全不识别 loading="lazy" 属性，解析时会直接忽略，图片仍按默认方式（loading="eager"）加载。

如何验证当前 Safari 是否支持 loading="lazy"

最可靠的方式是运行一段极简检测逻辑，而不是查 UA 或硬编码版本号：

创建一个 img 元素，设置 loading="lazy" 和一个无效的 src（如 data:image/gif;base64,R0lGODdh）
插入 DOM 后立即检查该元素的 loading 属性值是否仍为 "lazy"
若返回 undefined 或空字符串，说明浏览器不支持该属性（Safari 12 就属于此列）

示例代码：

const img = document.createElement('img');
img.loading = 'lazy';
document.body.appendChild(img);
console.log(img.loading); // Safari 12 输出 ''，Chrome/Firefox/Safari ≥15.4 输出 'lazy'

Safari 12 必须降级用 Intersection Observer

原生 loading="lazy" 在 Safari 12 上等于不存在，必须手动实现。但注意不是所有场景都适合上 IntersectionObserver：

陌言AI

陌言AI是一款中文场景化 AI 写作和办公内容生成工具。

下载

仅对视口内/即将进入视口的图片触发加载，需绑定 src 或 srcset
避免在页面滚动频繁时反复创建/销毁 observer 实例；建议复用单个实例监听所有懒加载图片
Safari 12 支持 IntersectionObserver，但不支持 rootMargin 的负值（如 "-100px"），需改用正值预留缓冲区
不要给 <img> 同时写 loading="lazy" 和手动 observer —— Safari 12 会忽略前者，但其他浏览器可能双加载

服务端无需配合，但 HTML 结构要留余地

懒加载是纯客户端行为，PHP/Node/Nginx 等后端完全不用改。但前端模板要注意：

把真实图片地址放在 data-src 或 data-srcset 中，而非直接写死 src
保留 width 和 height 属性（或 CSS aspect-ratio），防止布局抖动
避免用 background-image 做图片容器再懒加载——CSS 背景图无法被 IntersectionObserver 检测，也不支持 loading 属性