如何修复页面预加载器（Preloader）无法自动隐藏的问题

本文详解预加载器卡在旋转两次后冻结、主页面不显示的常见原因，重点修正 jquery 选择器错误、未调用函数、动画逻辑混乱等问题，并提供可直接运行的完整解决方案。

预加载器（Preloader）本应作为页面资源加载完成前的视觉过渡，但若实现不当，极易出现“无限旋转”“只转两圈就卡住”“主内容始终不显示”等典型问题。你遇到的现象—— spinner 仅旋转两次后冻结、页面白屏——根本原因并非动画本身，而是 javaScript 执行逻辑存在三处关键缺陷：

1. 选择器未加引号：$(preloader) 将 preloader 视为未声明的变量，导致 jquery 报错并中断执行；正确写法是 $(‘.preloader’)（使用类选择器字符串）；
2. 函数未主动调用：fade() 函数定义后未执行，浏览器不会自动运行它，必须显式调用一次（如 fade();）；
3. 错误的 setTimeout 嵌套逻辑：原代码中连续两次 setTimeout(fade, …) 并非“延迟后执行”，而是立即注册两个定时任务，且 fade() 内部又递归调用自身，造成无限重复淡出（甚至可能触发多次 dom 操作冲突），最终导致预加载器状态异常或 js 崩溃。

✅ 正确做法是：监听页面加载完成事件（$(document).ready() 或 window.onload），待所有资源加载完毕后，一次性执行 .fadeOut()，而非依赖循环定时器。

以下是修复后的完整、轻量、可靠的实现方案：

   @@##@@ 
    

/* 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); } }

? 关键注意事项：

• ✅ 务必检查
• ✅ 不要将 fadeOut() 放入无条件递归函数中——它不是轮询机制，而是一次性过渡操作；
• ✅ 若页面含大量图片或外部资源，建议结合 window.addEventListener(‘load’, …) 替代 $(document).ready()，确保所有资源（包括图片）加载完毕后再隐藏 preloader；
• ✅ 生产环境推荐使用纯 CSS + javascript 方案（无需 jQuery），降低依赖；但对初学者，上述 jQuery 方案简洁可靠，便于理解生命周期。

通过以上修正，你的预加载器将在页面完全就绪后平滑淡出，主内容自然呈现——既符合用户体验规范，也体现前端逻辑的严谨性。