本文介绍如何使用 jquery 实现页面加载完成时触发的数字倒计时动画预加载器，并配合向上滑出（slideup）过渡效果，替代传统静态加载提示，提升用户体验。
本文介绍如何使用 jquery 实现页面加载完成时触发的数字倒计时动画预加载器，并配合向上滑出（slideup）过渡效果，替代传统静态加载提示，提升用户体验。
在现代网页开发中，一个视觉友好、交互自然的预加载器不仅能缓解用户等待焦虑，还能强化品牌调性。本文将带你从零构建一个带数字倒计时动画 + 向上滑出过渡的轻量级预加载器，完全基于原生 jQuery（无需额外插件），兼容主流浏览器。
✅ 核心实现逻辑
预加载器需满足三个关键行为：
- 页面资源（window.load）全部加载完毕后才启动动画；
- 显示递减数字（如 3 → 2 → 1 → 0），每秒更新一次；
- 数字归零时，预加载容器整体 slideUp() 隐藏并移除 DOM 节点。
? HTML 结构（简洁语义化）
<!-- 预加载容器（居中显示，覆盖全屏） -->
<div id="preloader" style="
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: #fff;
display: flex;
justify-content: center;
align-items: center;
z-index: 9999;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
">
<span id="spnNumber" style="
font-size: 4rem;
font-weight: bold;
color: #333;
text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
">3</span>
</div>
? 提示：建议将样式抽离至 CSS 文件，此处内联仅为演示清晰。可添加 transition: opacity 0.3s ease 等增强平滑感。
⚙️ JavaScript 动画逻辑（jQuery）
$(window).on('load', function() {
let count = 3;
const $preloader = $('#preloader');
const $counter = $('#spnNumber');
function updateCounter() {
if (count > 0) {
$counter.fadeOut('fast', function() {
$(this).text(count).fadeIn('fast');
count--;
});
} else {
// 倒计时结束：滑出预加载器 + 清理定时器 + 移除计数器元素
$preloader.slideUp(800, function() {
$(this).remove();
});
$counter.remove();
clearInterval(timerId);
}
}
const timerId = setInterval(updateCounter, 1000);
});
? 关键细节说明
- $(window).on('load') 是正确时机：确保所有图片、CSS、脚本等外部资源加载完毕后再启动动画；
- fadeOut + fadeIn 组合 实现数字“翻页”式切换，比单纯 .text() 更具视觉反馈；
- slideUp(800) 提供优雅的向上收起动效，时长可按需调整（推荐 600–1000ms）；
- 务必调用 clearInterval()：避免内存泄漏和重复执行；
- 若需支持响应式，可在 CSS 中为 #spnNumber 添加媒体查询（如 font-size: clamp(2rem, 5vw, 4rem)）。
✅ 最终效果验证步骤
- 引入 jQuery（CDN 推荐 3.6+）：
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
- 将上述 HTML 和 JS 放入页面底部（或 $(document).ready() 外部）；
- 打开开发者工具 → Network → 禁用缓存 → 刷新页面，观察倒计时与滑出是否连贯。
⚠️ 注意事项：
- 避免在 $(document).ready() 中启动该逻辑（此时图片可能未加载完）；
- 如项目已迁移到原生 JS，可用 window.addEventListener('load', ...) 替代，配合 requestAnimationFrame 或 setTimeout 实现类似动画（本文聚焦 jQuery 场景）；
- 生产环境建议为 #preloader 添加 pointer-events: none，防止遮挡底层交互。
通过以上实现，你将获得一个专业、可控、易维护的数字倒计时预加载器——它不只是“等待提示”，更是用户体验旅程的第一帧仪式感。
