使用 JavaScript 的 Image() 对象预检背景图，onload 成功时设 background-image，onerror 或超时（如5秒）时设 backgroundColor；避免 CSS 叠加 fallback 或依赖 @supports。
background-image 加载失败时如何 fallback 到纯色
HTML 本身不提供 background-image 的加载超时或错误捕获机制，CSS 也不支持 onerror 类事件。真正能起作用的方案，是绕过 CSS 声明式加载，改用 JavaScript 主动加载图片，并在失败后回退到备用样式。
常见错误现象：页面渲染时背景图长时间空白、浏览器控制台报 404 或 net::ERR_CONNECTION_TIMED_OUT，但页面其他部分正常——说明 CSS 中的 url() 请求卡住或失败，且无降级逻辑。
- 不要依赖
@supports (background-image: url(...))，它只检测语法支持，不检测资源可用性 - 避免把 fallback 写成两层
background-image（如background-image: url(fallback.png), url(real.jpg)），叠加写法不会“失败后切换”，而是同时加载并层叠显示 - 最简可靠路径：用
fetch()或Image()预检图片，成功则设style.backgroundImage，失败则设style.backgroundColor
用 Image() 对象检测图片是否可访问
Image() 是轻量、兼容性好（IE8+）的检测方式，它不阻塞渲染，且自带 onload/onerror 回调，比 fetch() 更适合仅判断图片可用性。
注意：跨域图片需服务端返回 Access-Control-Allow-Origin，否则 onerror 可能静默触发（尤其在严格 CORS 模式下）；若无法改服务端，优先用 fetch() + no-cors（但会失去状态码判断能力）。
立即学习“前端免费学习笔记（深入）”；
const bgEl = document.getElementById('hero');
const img = new Image();
img.onload = () => {
bgEl.style.backgroundImage = 'url(https://example.com/bg.jpg)';
};
img.onerror = () => {
bgEl.style.backgroundColor = '#f0f0f0';
};
img.src = 'https://example.com/bg.jpg';
给 background-image 添加加载中占位与超时控制
纯 Image().onerror 只能响应“加载失败”，无法响应“加载过慢”。要实现超时，必须手动计时，且不能依赖图片自然加载完成时间（因为某些网络环境会卡在 pending 状态很久）。
关键点：
- 设置
setTimeout在指定毫秒后触发 fallback，但需在onload中clearTimeout，避免误触发 - 超时阈值建议设为
5000（5 秒），太短易误伤弱网用户，太长影响体验 - 加载中状态可通过临时加
background-color或background-image: url(data:image/svg+xml,...)的骨架图 SVG 实现
const bgEl = document.getElementById('hero');
const img = new Image();
const timeoutId = setTimeout(() => {
bgEl.style.backgroundColor = '#eaeaea';
}, 5000);
img.onload = () => {
clearTimeout(timeoutId);
bgEl.style.backgroundImage = 'url(https://example.com/bg.jpg)';
bgEl.style.backgroundColor = '';
};
img.onerror = () => {
clearTimeout(timeoutId);
bgEl.style.backgroundColor = '#eaeaea';
};
img.src = 'https://example.com/bg.jpg';
服务端配合：用 204 响应快速告知客户端“无需背景图”
如果背景图由接口动态决定（比如 CMS 后台配置），可在获取图片 URL 的 API 中增加策略：当原图不可用或未上传时，直接返回 HTTP 204（No Content）或带 { "bgUrl": null } 的 JSON。这样前端不用发起无效请求，从源头规避超时问题。
相比前端轮询或重试，这种方案更节省带宽和请求次数，也避免了竞态条件（例如图片在 onload 前已 404，但超时定时器还没触发）。
- 不推荐前端自己做重试（如
fetch(url).catch(() => fetch(url))），会延长白屏时间 - 若必须重试，最多 1 次，且第二次超时阈值应更短（如 3000ms）
- 所有图片 URL 应走 CDN 并开启缓存，
Cache-Control: public, max-age=31536000可大幅降低重复加载失败概率
img.onerror 会触发，但你拿不到具体是 403、404 还是超时；此时若没设超时兜底，用户可能等几十秒才看到 fallback 色块。 
