如何修改预加载器代码使其随实际内容加载进度计数

你可以通过监听页面资源的实际加载状态来替换原来的计时器模拟进度，以下是修改后的完整代码及说明：

修改后的完整代码 #

HTML #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/gsap.min.js"></script>
<div class="preloader">
  <div class="preloader__container">
        <h1 class="preloader__container__percent"></h1>
  </div>
</div>

<!-- 自定义脚本放在页面底部，确保DOM已加载 -->
<script>
// 下面是自定义JS代码
</script>

CSS #

.elementor-editor-active .preloader {
  display: none;
}

.preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  color: #f2f2f2;
  background-color: #ff635e;
  z-index: 999;
}
.preloader__container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
}
.preloader__container__percent {
  font-family: "Alliance Black Italic", Sans-serif;
  font-size: 15vw;
}

@media only screen and (max-width: 1024px) {
  .preloader__container__percent {
    font-family: "Alliance Black Italic", Sans-serif;
    font-size: 20vw;
  }

  .preloader__container__preload {
    display: flex;
  }
}

JavaScript #

// 初始化进度统计变量
let loadedCount = 0;
const progressElement = jQuery(".preloader__container__percent");

// 收集页面所有需要加载的资源类型
const allResources = [
  ...document.querySelectorAll('img'),
  ...document.querySelectorAll('script'),
  ...document.querySelectorAll('link[rel="stylesheet"]'),
  ...document.querySelectorAll('audio'),
  ...document.querySelectorAll('video')
];
const totalResources = allResources.length;

// 无资源时直接完成进度
if (totalResources === 0) {
  updateProgress(100);
  hidePreloader();
} else {
  // 为每个资源绑定加载/错误事件（错误也算完成，避免卡住）
  allResources.forEach(resource => {
    resource.addEventListener('load', updateProgressHandler);
    resource.addEventListener('error', updateProgressHandler);
  });
}

// 监听文档初始加载完成，处理遗漏的资源加载
document.addEventListener('DOMContentLoaded', () => {
  setTimeout(() => {
    if (loadedCount < totalResources) {
      loadedCount = totalResources;
      updateProgress(100);
      hidePreloader();
    }
  }, 500);
});

// 窗口完全加载后强制完成进度
window.addEventListener('load', () => {
  loadedCount = totalResources;
  updateProgress(100);
  hidePreloader();
});

// 更新进度的核心处理函数
function updateProgressHandler() {
  loadedCount++;
  const progress = Math.min(Math.round((loadedCount / totalResources) * 100), 100);
  updateProgress(progress);
  
  if (loadedCount >= totalResources) {
    hidePreloader();
  }
}

// 更新页面显示的进度数字
function updateProgress(percent) {
  progressElement.text(percent.toString());
}

// 隐藏预加载器的动画逻辑
function hidePreloader() {
  // 确保进度显示100后再执行隐藏动画
  progressElement.text("100");
  clearTimeout(window.preloaderTimeout);
  window.preloaderTimeout = setTimeout(() => {
    gsap.to(".preloader", 1, { y: "-100%" });
  }, 500);
}

关键改动说明 #

• 替换计时器模拟：不再用固定间隔递增数字，而是统计页面所有资源的加载状态计算真实进度
• 容错处理：为资源绑定error事件，避免单个资源加载失败导致预加载器卡住；同时通过DOMContentLoaded和window.load做兜底，确保预加载器最终会隐藏
• 进度计算：通过已加载资源数/总资源数计算百分比，确保进度与实际加载情况同步
• 体验优化：隐藏前强制显示100%并添加短暂延迟，避免进度跳变带来的突兀感

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