本文介绍如何在网页加载完成时，通过 jQuery 实现一个带数字倒计数（如 3→2→1）的预加载动画，并在计数结束时以 slideUp 方式优雅隐藏预载层，提升用户体验。
本文介绍如何在网页加载完成时，通过 jquery 实现一个带数字倒计数（如 3→2→1）的预加载动画，并在计数结束时以 `slideup` 方式优雅隐藏预载层，提升用户体验。
要打造一个兼具视觉吸引力与功能性的预加载页（preloader），关键在于「时机控制」与「动效协同」：既要确保页面资源完全加载后才启动动画，又要让数字变化与 DOM 过渡自然衔接。以下是一个轻量、可复用的完整实现方案。
✅ 核心逻辑说明
- 使用 $(window).on('load') 确保所有图片、脚本、样式表加载完毕后再触发；
- 启动一个每秒执行一次的倒计时器（setInterval），从 3 递减至 0；
- 每次计数更新时，先淡出数字 <span>，修改文本内容，再淡入，形成平滑切换；
- 当计数归零时，对整个 #preloader 执行 slideUp() 动画，并移除计数元素，释放 DOM 资源。
? 完整 HTML + CSS + JavaScript 示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>Portfolio Preloader</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
#preloader {
position: fixed;
top: 0; left: 0;
width: 100%; height: 100%;
background: #1a1a1a;
color: white;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
z-index: 9999;
font-family: 'Segoe UI', sans-serif;
text-align: center;
}
#spnNumber {
font-size: 4rem;
font-weight: bold;
margin-bottom: 1rem;
transition: opacity 0.3s ease;
}
@media (max-width: 768px) {
#spnNumber { font-size: 2.5rem; }
}
</style>
</head>
<body>
<!-- 预加载容器（含计数器） -->
<div id="preloader">
<span id="spnNumber">3</span>
<p>Loading your portfolio...</p>
</div>
<!-- 你的实际页面内容 -->
<main>
<h1>Welcome to My Portfolio</h1>
<p>This content appears after preloader finishes.</p>
</main>
<script>
$(window).on('load', function() {
let count = 3;
const $counter = $('#spnNumber');
const $preloader = $('#preloader');
function updateCounter() {
if (count > 0) {
$counter.fadeOut(300, function() {
$(this).text(count);
$(this).fadeIn(300);
count--;
});
} else {
// 计数结束：上滑隐藏预载层
$preloader.slideUp(800, function() {
$(this).remove(); // 彻底移除，避免残留 DOM
});
clearInterval(timerId);
}
}
const timerId = setInterval(updateCounter, 1000);
});
</script>
</body>
</html>⚠️ 注意事项与优化建议
- 兼容性：本方案依赖 jQuery 3.3+，若项目已迁移到原生 JS，可用 window.addEventListener('load', ...) + requestAnimationFrame 替代 setInterval，实现更高性能的动画控制；
- 可访问性：预加载期间建议添加 aria-live="polite" 到计数器元素，便于屏幕阅读器播报；
- 移动端适配：示例中已包含响应式字体缩放，实际使用中建议为 #preloader 添加 pointer-events: none，防止触摸干扰后续内容交互；
- SEO 友好性：确保 #preloader 不遮挡关键首屏内容的语义结构，且最终被 remove() 而非仅 hide()，避免影响渲染树。
该方案简洁可靠，兼顾动效质感与代码可维护性，适用于个人作品集、企业官网等注重首屏体验的场景。只需微调颜色、字体与动画时长，即可快速融入任意设计系统。
