本文介绍如何使用 jquery 实现一个带数字倒计时动画的页面预加载器，在页面完全加载后自动执行从 3 到 0 的倒计时，并在归零时以向上滑动（slideup）方式隐藏预加载层，提升用户体验。
要打造一个专业且富有动感的加载体验，我们可以将传统静态预加载器升级为「数字倒计时 + 动画过渡」形式。核心思路是：监听页面 load 事件 → 启动倒计时 → 每秒更新数字并触发动画 → 归零后执行 slideUp() 隐藏预加载容器，并清理 DOM。
以下是一个完整、可直接运行的实现方案（需引入 jQuery）：
<!-- 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> 放在 </body> 之前，确保 DOM 已就绪，无需额外包裹 $(document).ready()；
- 若需适配移动端，可添加 pointer-events: none 到 #preloader 防止加载期间误触。
? 进阶建议：
- 可替换为 GSAP 实现更精细的数字滚动动画（如 ScrollTrigger 或 CountUp 插件）；
- 添加音频提示（如“滴”声）强化倒计时感知；
- 结合 performance.now() 监控实际加载耗时，动态调整倒计时起点（例如：若资源加载快于 3 秒，则跳过倒计时直接退出）。
该方案轻量、兼容性好（支持 IE9+），兼顾功能性与表现力，非常适合个人作品集、创意型官网等场景。
