div元素CSS背景图首次切换时出现闪烁问题求助

这问题我碰到过好多次啦，本质就是首次切换时新背景图还没完成加载——浏览器得等它下载完才能渲染出来，所以才会出现一闪而过的空白或者延迟。给你几个靠谱的解决办法，按需求选就行：

1. 预加载图片（最常用的根治方案） #

提前把需要切换的悬停背景图加载到浏览器缓存里，这样鼠标第一次悬停时，直接用已经备好的图，完全不会等。

方法A：用JavaScript预加载 #

页面加载完成后，通过创建Image对象悄悄加载图片：

window.addEventListener('load', function() {
  // 加载你需要的悬停背景图
  const hoverBackground = new Image();
  hoverBackground.src = '你的悬停图路径.jpg';
  
  // 如果有多个要切换的图，用数组循环更方便
  // const preloadList = ['hover1.jpg', 'hover2.jpg'];
  // preloadList.forEach(src => {
  //   const img = new Image();
  //   img.src = src;
  // });
});

方法B：用隐藏的<img>标签预加载 #

不想写JS的话，直接在页面里加个隐藏的图片标签，浏览器会自动加载它：

<!-- 放在<body>里任意位置都行 -->
<img src="你的悬停图路径.jpg" style="position: absolute; left: -9999px; top: -9999px;" alt="预加载背景图">

用绝对定位把它移出可视区域，比display: none更稳妥（有些浏览器对display: none的图片不会提前加载）。

2. 用CSS同时加载两张图 #

给目标元素的background-image同时设置默认图和悬停图，让浏览器在加载页面时一起把两张图都下载好，悬停时只是切换显示哪张：

.your-div-class {
  /* 先声明两张图，让浏览器提前加载 */
  background-image: url('默认背景图.jpg'), url('悬停背景图.jpg');
  /* 默认显示第一张图 */
  background-image: url('默认背景图.jpg');
  background-position: center;
  background-size: cover;
}

.your-div-class:hover {
  /* 切换到悬停图，此时图已经加载好了 */
  background-image: url('悬停背景图.jpg');
}

3. 加过渡效果优化体验（可选） #

如果担心还是有细微延迟，可以给背景图切换加个过渡动画，让切换更平滑，就算有一点加载延迟也不会显得突兀：

.your-div-class {
  background-image: url('默认背景图.jpg');
  background-position: center;
  background-size: cover;
  /* 添加背景图切换的过渡 */
  transition: background-image 0.3s ease-in-out;
}

.your-div-class:hover {
  background-image: url('悬停背景图.jpg');
}

注意这个要配合预加载一起用，不然过渡过程中还是会等图片加载。

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