loading 属性对 background-image 完全无效，因其仅作用于带 src 的 HTML 元素（如 img、iframe），而 background-image 是 CSS 行为，不被 HTML 解析器识别；替代方案为用带 loading="lazy" 的 <img> 替代或 JS + IntersectionObserver 动态加载。
loading 属性对按钮的 background-image 完全无效，无论你把它加在 <button>、<div> 还是任何其他元素上。
浏览器原生的 loading 只作用于带 src 属性的 HTML 元素（主要是 <img> 和 <iframe>），而 background-image 是纯 CSS 行为，解析发生在样式计算阶段，HTML 解析器根本不知道这张图是否存在、何时该加载。给按钮加 loading="lazy" 不会触发任何懒加载逻辑，DevTools 的 Network 面板里它仍会在页面初始化时就发出请求。
为什么 button 上的 background-image 无法用 loading="lazy"
-
loading是 HTML 属性，不是 CSS 属性，浏览器不会把它和background-image关联 - 即使按钮用了
background-image: url("hero.jpg")，且父容器有loading="lazy"，该属性被忽略（HTML 规范不定义它在此处的意义） - 所有通过 CSS 引入的图片——包括
::before/::after的content: url()、border-image、CSS 变量里的图片路径——全部不支持loading - Chrome、Firefox、Safari 均如此，这不是兼容性问题，而是规范层面的限制
替代方案：用 <img> 模拟按钮背景图
如果视觉上需要“按钮带背景图”，又想真正延迟加载，唯一可靠方式是把背景图换成 <img>，再用 CSS 覆盖定位和交互：
-
把按钮结构从：
立即学习“前端免费学习笔记（深入）”；
<button style="background-image: url('cta-bg.jpg')">立即购买</button>改为：<button class="btn-with-bg"> <img src="cta-bg.jpg" loading="lazy" alt="" width="100" height="40"> <span>立即购买</span> </button>
-
然后用 CSS 控制：
.btn-with-bg { position: relative; overflow: hidden; }.btn-with-bg img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }.btn-with-bg span { position: relative; z-index: 1; }
注意点：
-
<img>必须设width和height（或aspect-ratio），否则 Safari 可能静默跳过loading="lazy" - 确保按钮容器有明确宽高或
display: inline-flex等可推断尺寸的布局上下文 - 不要在
.btn-with-bg上用transform、opacity或will-change，否则懒加载可能失效
真正需要 JS 动态控制 background-image 的场景
如果你无法改动 DOM（比如 CMS 输出固定 HTML + CSS），那就只能靠 JavaScript：
- 用
IntersectionObserver监听按钮是否进入视口 - 进入后，动态添加一个含
background-image的 class，或直接设置style.backgroundImage
示例：
const btn = document.querySelector('.js-lazy-bg-btn');
const observer = new IntersectionObserver(([{ isIntersecting }]) => {
if (isIntersecting) {
btn.style.backgroundImage = 'url("cta-bg.jpg")';
observer.unobserve(btn);
}
});
observer.observe(btn);关键提醒：
- 初始 HTML 中不要写
background-image，否则图片照常预加载 - 如果按钮本身高度为 0 或
display: none，IntersectionObserver无法触发，得先确保它有渲染占位 - 不要依赖
scroll事件手动判断位置，性能差且易漏帧
复杂点在于：你没法既保留纯 CSS 背景图的简洁性，又获得原生懒加载的可靠性。选 <img> 就得改结构；选 JS 就得自己管生命周期和 fallback。没有中间路线。
