本文介绍如何使用 jquery 实现页面加载完成后的数字倒计时动画（如 3→2→1），并在倒计时结束时以向上滑动（slideup）方式隐藏预加载器，提升用户体验。代码轻量、逻辑清晰，兼容主流浏览器。
本文介绍如何使用 jquery 实现页面加载完成后的数字倒计时动画（如 3→2→1），并在倒计时结束时以向上滑动（slideup）方式隐藏预加载器，提升用户体验。代码轻量、逻辑清晰，兼容主流浏览器。
在现代网页开发中，一个流畅的加载过渡效果能显著增强用户的第一印象。本文将带你从零构建一个「数字倒计时 + 预加载器上滑退出」的完整方案——它在 window 完全加载后自动触发，先展示递减数字（如 3 → 2 → 1），最后平滑隐藏预加载容器，并清理 DOM 节点。
✅ 核心实现逻辑
- 使用 $(window).on('load', ...) 确保所有资源（图片、CSS、脚本等）加载完毕后再启动动画；
- 利用 setInterval 控制倒计时节奏（例如每秒执行一次）；
- 借助 jQuery 的 fadeOut() / fadeIn() 实现数字切换的淡入淡出效果，避免生硬替换；
- 倒计时归零后，调用 slideUp() 动画隐藏整个预加载器，并通过 remove() 彻底移除计数 <span> 元素，释放内存。
? 完整可运行代码示例
<!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: #fff;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
z-index: 9999;
transition: opacity 0.3s;
}
#spnNumber {
font-size: 4rem;
font-weight: bold;
color: #333;
margin-bottom: 1rem;
}
@media (max-width: 768px) {
#spnNumber { font-size: 2.5rem; }
}
</style>
</head>
<body>
<!-- 页面真实内容 -->
<h1>欢迎来到我的作品集</h1>
<p>这是主页面内容，将在加载完成后显示。</p>
<!-- 预加载器结构 -->
<div id="preloader">
<span id="spnNumber">3</span>
<p>Loading...</p>
</div>
<!-- 引入 jQuery（建议使用 CDN） -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(window).on('load', function() {
let count = 3;
const $numberSpan = $('#spnNumber');
const $preloader = $('#preloader');
function updateCounter() {
if (count > 0) {
$numberSpan.fadeOut('fast', function() {
$(this).text(count);
$(this).fadeIn('fast');
count--;
});
} else {
// 倒计时结束：上滑隐藏预加载器
$preloader.slideUp(600, function() {
$(this).remove(); // 清理 DOM
});
}
}
// 每秒执行一次倒计时（首帧立即开始，后续间隔 1000ms）
const timer = setInterval(updateCounter, 1000);
// 首次立即执行，避免首秒空白（可选优化）
updateCounter();
});
</script>
</body>
</html>⚠️ 注意事项与最佳实践
- jQuery 版本兼容性：示例使用 jQuery 3.6.0，确保引入版本 ≥ 3.0；若项目已使用较新版本（如 3.7+），无需降级。
- 性能考量：setInterval 在倒计时结束后务必配合 clearInterval(timer) 显式清除（本例中因 count === 0 后不再调用 updateCounter，且 slideUp 回调中已移除元素，故未显式清除亦安全；但更严谨写法建议在 else 块中添加 clearInterval(timer)）。
- 无障碍友好：当前预加载器无语义化标签，如需提升可访问性，可为 #preloader 添加 role="status" 和 aria-live="polite"。
- 移动端适配：CSS 中已加入响应式字体缩放，可根据实际设计调整 #spnNumber 尺寸与动画时长（如 slideUp(400) 更迅捷，slideUp(800) 更舒缓）。
- 替代方案提示：如项目已迁移到原生 JavaScript 或 Vue/React，可用 requestAnimationFrame 或 CSS @keyframes + transitionend 事件重构，进一步减少依赖。
通过以上实现，你将获得一个简洁、可控、视觉友好的加载过渡体验——数字倒计时建立期待感，slideUp 动画赋予页面“浮现”般的自然感，是个人作品集或企业官网中值得复用的微交互范式。
