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

本文介绍如何使用 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 资源；
• 推荐将