本文介绍如何使用 jQuery 在网页加载完成时，实现带数字倒计时（如 3→2→1）的预加载动画，并在计数结束后以 slideUp 方式平滑隐藏预加载层，提升用户体验。
本文介绍如何使用 jquery 在网页加载完成时，实现带数字倒计时（如 3→2→1）的预加载动画，并在计数结束后以 `slideup` 方式平滑隐藏预加载层，提升用户体验。
在现代前端开发中，一个轻量、视觉友好的预加载器不仅能缓解用户等待焦虑，还能强化品牌调性。本文提供一种简洁可靠的实现方案：利用 $(window).on('load') 监听资源完全加载后，启动倒计时动画，并配合 jQuery 的 fadeIn/fadeOut 与 slideUp 实现流畅的数字切换与整体退出动效。
✅ 核心实现逻辑
- 使用 setInterval 每秒触发一次倒计时；
- 每次更新 <span id="spnNumber"> 中的数字文本；
- 利用 fadeOut → text() → fadeIn 组合实现数字“翻转”感（避免生硬替换）；
- 计数归零后执行 #preloader.slideUp() 并移除计数元素，释放 DOM 资源。
? 完整示例代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>倒计时预加载器</title>
<style>
#preloader {
position: fixed;
top: 0; left: 0;
width: 100%; height: 100%;
background: #1a1a1a;
color: #fff;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
z-index: 9999;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
font-size: 2.5rem;
font-weight: 600;
text-align: center;
transition: opacity 0.3s ease;
}
#spnNumber {
margin-top: 1rem;
font-size: 4rem;
font-weight: 800;
color: #4cc9f0;
text-shadow: 0 0 12px rgba(76, 201, 240, 0.5);
}
@media (max-width: 768px) {
#preloader { font-size: 1.8rem; }
#spnNumber { font-size: 3rem; }
}
</style>
</head>
<body>
<!-- 预加载容器 -->
<div id="preloader">
正在启动<br>
<span id="spnNumber">3</span>
</div>
<!-- 页面主体内容（此处仅为示意） -->
<main style="padding: 2rem; max-width: 800px; margin: 0 auto;">
<h1>欢迎来到我的作品集</h1>
<p>页面已加载完毕，预加载动画已自动退出。</p>
</main>
<!-- 引入 jQuery（务必在 body 底部或使用 defer） -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(window).on('load', function() {
let count = 3;
const $preloader = $('#preloader');
const $spnNumber = $('#spnNumber');
function updateCounter() {
if (count > 0) {
$spnNumber.fadeOut('fast', function() {
$(this).text(count);
$(this).fadeIn('fast');
count--;
});
} else {
// 倒计时结束：滑出预加载层并清理
$preloader.slideUp(800, function() {
$(this).remove();
});
$spnNumber.remove();
clearInterval(timerId);
}
}
const timerId = setInterval(updateCounter, 1000);
});
</script>
</body>
</html>⚠️ 注意事项与优化建议
- 兼容性：本方案依赖 jQuery 3.3+，若项目已迁移到原生 JS，可改用 requestAnimationFrame + CSS transitions 替代 slideUp，获得更佳性能；
- 可访问性：预加载器存在期间应禁用键盘交互（如 tabindex="-1" + aria-hidden="true"），并在移除后恢复焦点管理；
- 防重复触发：$(window).on('load') 确保所有图片、CSS、脚本加载完毕，但若页面含动态资源（如懒加载图片），建议结合 document.readyState === 'complete' 或 PerformanceObserver 进行增强判断；
- 移动端适配：示例中已加入响应式字体缩放，实际项目中建议为 #preloader 添加 pointer-events: none 防止误触，同时避免 transform: scale() 类动画引发重排。
通过以上实现，你将获得一个专业、可控、易于定制的数字倒计时预加载体验——它不仅是技术实现，更是用户进入你数字世界的第一个优雅仪式。
