如何强制预加载网站资源或添加加载屏 解决背景图需滚动才显示问题

1. 新增加载屏HTML结构 #

将以下代码放在<body>标签的最开头位置：

<div id="loading-screen">
  <div class="loading-spinner"></div>
</div>

2. 添加加载屏样式 #

把以下CSS加入你的全局样式文件中：

/* 加载屏全局样式，默认全屏显示 */
#loading-screen {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  background-color: #0f172a; /* 可替换为你网站的主背景色，保持风格统一 */
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

/* 简单旋转加载动画，可替换为自定义logo/动画 */
.loading-spinner {
  width: 50px;
  height: 50px;
  border: 3px solid rgba(255,255,255,0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* 加载完成后添加该类，平滑隐藏加载屏 */
#loading-screen.hidden {
  opacity: 0;
  visibility: hidden;
}

/* 加载完成前隐藏主内容，避免出现半加载的错乱界面 */
body:not(.loaded) .main-content { /* 把.main-content替换为你网站主内容容器的实际选择器 */
  display: none;
}

3. 添加JS逻辑 #

把以下JS代码加入页面的<script>标签中，注意要放在DOM加载完成前执行：

// 预加载核心背景图，解决需要滚动才触发加载的问题
const preloadBackgroundImages = () => {
  // 把你网站所有用到的背景图完整地址填入下方数组
  const backgroundImageList = [
    // 示例：'https://donajsky.5v.pl/xxx/bg1.webp'
  ];
  backgroundImageList.forEach(imgUrl => {
    const tempImg = new Image();
    tempImg.src = imgUrl;
  });
};

// 监听页面所有资源（图片、样式、脚本等）加载完成后隐藏加载屏
window.addEventListener('load', () => {
  const loadingScreen = document.getElementById('loading-screen');
  // 预留200ms缓冲时间，避免加载过快出现闪屏，可根据需求调整
  setTimeout(() => {
    loadingScreen.classList.add('hidden');
    document.body.classList.add('loaded');
    // 动画结束后移除加载屏DOM，释放性能
    setTimeout(() => loadingScreen.remove(), 500);
  }, 200);
});

// 页面初始化阶段直接执行预加载
preloadBackgroundImages();

额外优化建议 #

• 提前压缩所有背景图体积，优先使用webp/avif等高效图片格式，可大幅减少加载耗时
• 如果背景图体积过大，可先加载低分辨率模糊版本作为占位，高清图加载完成后再替换，进一步提升体验

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