本文详解预加载器卡在旋转两次后冻结、主页面不显示的常见原因，重点修正 jquery 选择器错误、未调用函数、动画逻辑混乱等问题，并提供可直接运行的完整解决方案。
预加载器（Preloader）本应作为页面资源加载完成前的视觉过渡，但若实现不当，极易出现“无限旋转”“只转两圈就卡住”“主内容始终不显示”等典型问题。你遇到的现象—— spinner 仅旋转两次后冻结、页面白屏——根本原因并非动画本身，而是 JavaScript 执行逻辑存在三处关键缺陷：
- 选择器未加引号：$(preloader) 将 preloader 视为未声明的变量，导致 jQuery 报错并中断执行；正确写法是 $('.preloader')（使用类选择器字符串）；
- 函数未主动调用：fade() 函数定义后未执行，浏览器不会自动运行它，必须显式调用一次（如 fade();）；
- 错误的 setTimeout 嵌套逻辑：原代码中连续两次 setTimeout(fade, ...) 并非“延迟后执行”，而是立即注册两个定时任务，且 fade() 内部又递归调用自身，造成无限重复淡出（甚至可能触发多次 DOM 操作冲突），最终导致预加载器状态异常或 JS 崩溃。
✅ 正确做法是：监听页面加载完成事件（$(document).ready() 或 window.onload），待所有资源加载完毕后，一次性执行 .fadeOut()，而非依赖循环定时器。
以下是修复后的完整、轻量、可靠的实现方案：
<!-- HTML -->
<div class="preloader">
<img src="./Images/loading.png" alt="Loading...">
</div>
<!-- 注意：jQuery 版本已更新为稳定版，且 .min.js 后缀拼写修正 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<script>
$(document).ready(function() {
// 确保 DOM 加载完成后再执行
setTimeout(function() {
$('.preloader').fadeOut('slow', function() {
// fadeOut 完成后回调：可选地移除元素以释放内存
$(this).remove();
});
}, 800); // 可选：预留短暂动画缓冲（如需更顺滑，可配合 CSS transition）
});
</script>/* CSS —— 移除冗余 animation-duration 和未使用的 @keyframes fadeout */
.preloader {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background-color: #FFA800;
z-index: 999999; /* 高于所有内容，但避免过度夸张如 100000 */
display: flex;
align-items: center;
justify-content: center;
transition: opacity 0.4s ease; /* 为 fadeOut 提供平滑基础 */
}
.preloader img {
width: 150px;
animation: spin 3s linear infinite; /* 改为 infinite，确保持续旋转直到被移除 */
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}? 关键注意事项：
- ✅ 务必检查 <script> 标签中 jQuery 的 URL 是否拼写正确（原代码中 jquery.minjs 应为 jquery.min.js）；
- ✅ 不要将 fadeOut() 放入无条件递归函数中——它不是轮询机制，而是一次性过渡操作；
- ✅ 若页面含大量图片或外部资源，建议结合 window.addEventListener('load', ...) 替代 $(document).ready()，确保所有资源（包括图片）加载完毕后再隐藏 preloader；
- ✅ 生产环境推荐使用纯 CSS + JavaScript 方案（无需 jQuery），降低依赖；但对初学者，上述 jQuery 方案简洁可靠，便于理解生命周期。
通过以上修正，你的预加载器将在页面完全就绪后平滑淡出，主内容自然呈现——既符合用户体验规范，也体现前端逻辑的严谨性。
