如何实现网页加载时的数字倒计时动画预加载器（含滑动退出效果）

本文介绍如何使用 jquery 实现一个带数字倒计时动画的页面预加载器，在页面完全加载后自动执行从 3 到 0 的倒计时，并在归零时以向上滑动（slideup）方式隐藏预加载层，提升用户体验。

要打造一个专业且富有动感的加载体验，我们可以将传统静态预加载器升级为「数字倒计时 + 动画过渡」形式。核心思路是：监听页面 load 事件 → 启动倒计时 → 每秒更新数字并触发动画 → 归零后执行 slideUp() 隐藏预加载容器，并清理 DOM。

以下是一个完整、可直接运行的实现方案（需引入 jQuery）：

Zyro AI Image Upscaler

Zyro出品的AI图片放大工具

下载

<!-- HTML 结构 -->
<div id="preloader">
  <span id="spnNumber">3</span>
</div>

/* CSS 样式增强（可选但推荐） */
#preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: #1a1a1a;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  color: #fff;
  font-size: 4rem;
  font-weight: bold;
  text-shadow: 0 0 10px rgba(255,255,255,0.5);
  transition: opacity 0.3s ease;
}

#spnNumber {
  opacity: 0;
  animation: fadeInUp 0.6s ease forwards;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

<!-- JavaScript（置于 </body> 前或 document ready 内） -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(window).on('load', function() {
  let count = 3;

  function updateCounter() {
    if (count > 0) {
      // 先淡出旧数字，再更新文本，再淡入新数字（营造“翻页”感）
      $('#spnNumber').fadeOut('fast', function() {
        $(this).text(count);
        $(this).fadeIn('fast');
      });
      count--;
    } else {
      // 倒计时结束：向上滑出预加载器，并移除元素
      $('#preloader').slideUp(800, function() {
        $(this).remove();
      });
      clearInterval(counterInterval);
    }
  }

  // 每秒执行一次倒计时
  const counterInterval = setInterval(updateCounter, 1000);
});
</script>

✅ 关键要点说明：

• 使用 setInterval 控制倒计时节奏，避免 setTimeout 嵌套导致的内存泄漏风险；
• fadeOut + fadeIn 组合实现数字切换的平滑过渡，比单纯 .text() 更具视觉反馈；
• slideUp() 执行完毕后调用 .remove()，彻底释放 DOM 资源；
• 推荐将 <script> 放在 </script>