使用onMouseOver切换背景图首次触发闪白1秒的bug如何解决？

问题根源 #

该空白现象由图片未提前加载导致：
你只有触发onmouseover事件时才会给背景元素设置backgroundImage属性，此时浏览器才会发起对应年份获奖背景图的网络请求，请求下载的1秒左右时间就会出现空白。图片下载完成后会被浏览器本地缓存，后续再触发同一年份的悬浮操作就会直接读取缓存，不会再出现空白。刷新页面后缓存重置，问题就会复现。你提到的气泡缩放、透明度变换效果和该问题完全无关，不需要调整这部分逻辑。

解决方案 #

方案1：页面加载完成后预加载所有背景图 #

适合你当前年份范围不大（1950-2021共72张图）的场景，不需要修改原有悬浮逻辑，直接新增预加载代码即可：

// 页面加载完成后自动预加载所有年份的背景图
window.addEventListener('load', function() {
  for (let year = 1950; year <= 2021; year++) {
    // 仅创建临时Image对象触发下载，不需要插入页面DOM
    const tempImg = new Image();
    tempImg.src = `/imgs/jpg/yearswinner/${year}.jpg`;
  }
})

方案2：按需加载图片，加载完成后再替换背景 #

如果不想提前占用带宽加载所有图片，可修改你的onMouseOver逻辑，等目标图片加载完成后再替换背景，避免空白：

function onMouseOver(year){
  const element = document.getElementById('conf');
  const curYear = year.id; 

  for(let y=2021; y>=1950; y--){
    document.getElementById(y+100).value = curYear;
    document.getElementById(y+200).value = currentNumOfRounds;
  }
  
  // 先预加载目标背景图
  const targetBg = new Image();
  targetBg.src = `/imgs/jpg/yearswinner/${curYear}.jpg`;
  // 图片加载完成后再替换背景
  targetBg.onload = () => {
    element.style.backgroundImage = `url(${targetBg.src})`;
  }

  for(let i=2021; i>=1950; i--){
    if(i == curYear){
      document.getElementById(i).style.opacity = "1";
      document.getElementById(i).style.transition = "transform .2s";
      document.getElementById(i).style.transform = "scale(1.1)";
    }else{
      document.getElementById(i).style.opacity = "0.5";
      document.getElementById(i).style.transition = "transform .2s";
      document.getElementById(i).style.transform = "scale(0.9)";
    }          
  }     
}

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