17370845950

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

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

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

  3

/* 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);
  }
}

✅ 关键要点说明：

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

• 推荐将