本教程旨在解决网页预加载器过早消失的问题，特别是当页面包含背景视频等大型媒体文件时。我们将探讨如何利用javascript和jquery，在`window.onload`事件触发后，通过引入额外的延迟和动画效果，确保gif预加载器在所有内容完全加载并准备就绪后才平滑地淡出，从而显著提升用户体验。
1. 理解网页加载与预加载器
预加载器（Preloader）是网页设计中常用的一种技术，它在页面内容完全加载并渲染之前，向用户展示一个加载动画（通常是GIF），以减少等待的焦虑感。然而，常见的window.onload事件在所有静态资源（图片、CSS、JS文件）加载完成后触发，但对于某些动态加载或大型媒体文件（如背景视频），可能在onload事件之后才开始缓冲或播放。这会导致预加载器过早消失，用户看到一个不完整的页面。
2. 基础预加载器的HTML结构与CSS样式
首先，我们需要一个承载预加载动画的HTML元素，并为其定义全屏覆盖的样式。
HTML 结构
创建一个div元素作为预加载容器，并在其中放置GIF图片。为了方便JavaScript操作和CSS样式定义，我们建议使用ID属性。
<div id="loading"> <img id="loading-image" src="https://catulu.club/images/ch1-img.159861e81e6dc4bfca11.gif" alt="页面加载中..." /> </div> <body> <!-- 页面主体内容 --> <p>hello world, testing testing</p> <!-- 其他页面元素，包括背景视频等 --> </body>
CSS 样式
为预加载容器定义全屏、固定定位、高层级（z-index）的样式，并使其内容居中显示。
#loading {
position: fixed; /* 固定定位，覆盖整个视口 */
display: flex; /* 使用Flexbox布局 */
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
width: 100%; /* 宽度占满 */
height: 100%; /* 高度占满 */
top: 0;
left: 0;
opacity: 1; /* 初始不透明度为1，可见 */
background-color: #36395A; /* 背景颜色 */
z-index: 9999; /* 确保在所有内容之上 */
transition: opacity 0.5s ease-out; /* 为淡出效果添加过渡 */
}
#loading-image {
z-index: 10000; /* 确保GIF在背景之上 */
}
/* 如果需要，可以为消失动画单独定义 */
/* .dissapear {
animation: vanish 1s forwards;
}
@keyframes vanish {
100% {
opacity: 0;
visibility: hidden;
}
} */注意： 这里的transition属性是为了配合JavaScript的fadeOut方法，实现更平滑的过渡效果。如果使用CSS动画（如@keyframes vanish），则JavaScript只需添加相应的类名即可。
3. 实现延迟消失与平滑过渡（推荐使用jQuery）
为了解决预加载器过早消失的问题，我们将在window.onload事件触发后，引入一个额外的延迟。jQuery库提供了更简洁的DOM操作和事件处理方式，非常适合此类任务。
引入 jQuery
在HTML文件的 </body> 标签结束之前，引入jQuery库。
<!-- Place script below at the bottom of the body --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
提示： 建议使用最新稳定版本的jQuery CDN链接。
JavaScript 逻辑
这段脚本将在页面所有资源（包括图片、CSS、JS）加载完成后（即window.onload事件触发），等待一个额外的指定时间，然后平滑地淡出预加载器，并最终将其从DOM中移除。
$(window).on('load', function() {
// 当所有资源加载完毕后，等待额外的3秒
setTimeout(removeLoader, 3000);
});
function removeLoader() {
// 查找ID为'loading'的元素，并以500毫秒的速度淡出
$("#loading").fadeOut(500, function() {
// 淡出动画完成后，将'loading'元素从DOM中移除，以减轻页面负担
$(this).remove();
});
}代码解析：
- $(window).on('load', function() { ... });：这是jQuery监听window对象的load事件的标准方式，等同于原生JavaScript的window.onload = function() { ... };，但兼容性更好。
- setTimeout(removeLoader, 3000);：在load事件触发后，设置一个定时器。它会在3000毫秒（即3秒）后调用removeLoader函数。这个额外的延迟是解决预加载器过早消失的关键，它为背景视频或其他重型资源提供了更多加载时间。您可以根据实际情况调整延迟时间。
- $("#loading").fadeOut(500, function() { ... });：这是jQuery的fadeOut方法，它会使匹配的元素在500毫秒内逐渐变得透明并最终隐藏。
- $(this).remove();：fadeOut方法接受一个回调函数，这个函数会在淡出动画完成后执行。在这里，$(this)指向正在淡出的#loading元素，remove()方法将其从DOM中彻底删除。这样做可以使页面更加轻量化，避免不必要的DOM元素占用内存。
4. 注意事项与最佳实践
- 延迟时间调整： setTimeout的延迟时间（如3000毫秒）应根据您的页面内容复杂度和目标用户的平均网络速度进行调整。过短可能无效，过长则会增加用户等待时间。
- jQuery引入位置： 确保jQuery脚本在您自定义的预加载脚本之前被引入，并且通常放在</body>标签的结束之前是最佳实践，可以避免阻塞页面渲染。
- 无障碍性： 为<img>标签添加有意义的alt属性，以便屏幕阅读器等辅助技术能够理解图片内容。
- 兼容性： 现代浏览器普遍支持上述方法。如果您需要支持非常老的浏览器，可能需要额外的Polyfill。
- 替代方案（高级）： 对于背景视频，更精确的控制可以是监听视频元素的canplaythrough事件，该事件表示视频已经缓冲到足以流畅播放的程度。然而，这会增加代码的复杂性，并且可能需要针对不同媒体类型编写不同的监听逻辑。本教程提供的setTimeout方法是一个更通用且易于实现的解决方案。
- 动画效果： 如果您希望使用CSS @keyframes 定义的动画来控制预加载器的消失，可以在removeLoader函数中，将$("#loading").fadeOut(500, ...)替换为$("#loading").addClass("dissapear");，并确保CSS动画中包含forwards属性，以便动画结束后元素状态保持。
总结
通过结合$(window).on('load')事件和setTimeout延迟，我们可以有效地控制GIF预加载器的消失时机，确保它在页面所有关键内容（包括背景视频）加载完成后才平滑淡出。这种方法不仅提升了用户体验，避免了不完整的页面展示，还通过移除DOM元素优化了页面性能。在实际应用中，请根据您的具体需求和用户场景，灵活调整延迟时间和其他动画细节。
