如何检测CSS文件中设置的background-image背景图片是否加载完成

核心逻辑是利用JS预加载和CSS背景图同路径的图片，监听图片加载事件，加载完成后再渲染需要展示的内容，浏览器会自动复用已加载完成的图片缓存，不会重复请求资源。

步骤1：添加初始状态样式 #

先隐藏需要晚于背景图展示的内容，避免文本提前渲染：

/* 初始状态下页面内容透明 */
body {
  opacity: 0;
  transition: opacity 0.3s ease; /* 可选，加淡入效果更自然 */
}
/* 背景图加载完成后添加的类，显示内容 */
body.bg-loaded {
  opacity: 1;
}
.container{
    background-image: url(/images/rickandmorty.jpg) !important;
    background-repeat: no-repeat;
    background-size: cover;
}

步骤2：添加JS监听逻辑 #

方案A：固定图片路径（简单直接） #

// 路径必须和CSS中background-image的url完全一致
const bgImageUrl = '/images/rickandmorty.jpg';
const preloadImg = new Image();

// 加载完成回调
preloadImg.onload = () => {
  document.body.classList.add('bg-loaded');
}

// 加载失败兜底，避免页面一直空白
preloadImg.onerror = () => {
  console.error('背景图加载失败');
  document.body.classList.add('bg-loaded');
}

// 赋值路径触发预加载
preloadImg.src = bgImageUrl;

方案B：动态获取CSS中的背景图路径（无需硬编码路径） #

如果不想写死图片路径，可以直接读取元素的计算样式提取路径：

const container = document.querySelector('.container');
const computedStyle = window.getComputedStyle(container);
// 提取backgroundImage中的url，自动去掉包裹的引号和url()标识
const bgImageUrl = computedStyle.backgroundImage.slice(4, -1).replace(/["']/g, '');

const preloadImg = new Image();
preloadImg.onload = () => document.body.classList.add('bg-loaded');
preloadImg.onerror = () => document.body.classList.add('bg-loaded');
preloadImg.src = bgImageUrl;

注意事项 #

• 确保预加载的图片路径和CSS中配置的路径完全一致，否则浏览器会判定为不同资源，无法复用缓存
• 必须添加onerror兜底逻辑，避免背景图加载失败时页面一直空白
• 如果不需要隐藏整个页面，也可以单独给文本容器设置初始隐藏状态，逻辑完全一致

内容的提问来源于stack exchange，提问作者RandomDeveloper