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