如何预加载图片资源 避免切换背景时出现白屏及DOM内容偏移

方案1：纯CSS预加载（新手首选，无JS逻辑） #

直接将以下代码插入到HTML文件的<head>标签内的<style>块中即可，浏览器加载页面时会自动将列表内的背景图提前缓存到本地，切换时无需等待加载：

body::after {
  content: "";
  position: fixed;
  width: 0;
  height: 0;
  overflow: hidden;
  z-index: -9999;
  /* 把下面的地址替换为你所有用到的运动背景图地址，用逗号分隔 */
  background: 
    url("./assets/football-bg.jpg"),
    url("./assets/basketball-bg.jpg"),
    url("./assets/tennis-bg.jpg");
}

方案2：JS预加载（灵活易维护） #

如果后续会经常新增运动选项，推荐用JS方案实现预加载，直接将以下代码插入到HTML文件的</body>闭合标签之前即可：

// 把数组内的地址替换为你所有用到的运动背景图地址
const preloadBgList = [
  "./assets/football-bg.jpg",
  "./assets/basketball-bg.jpg",
  "./assets/tennis-bg.jpg"
];

preloadBgList.forEach(imgUrl => {
  const tempImg = new Image();
  tempImg.src = imgUrl;
});

附加优化（可选） #

给背景切换增加过渡动画，进一步提升体验，把以下规则加到body的CSS样式中：

body {
  transition: background-image 0.25s linear;
}

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