使用jQuery和CSS实现页面加载预加载器：确保内容完全加载后平滑过渡-html教程-PHP中文网

使用jQuery和CSS实现页面加载预加载器：确保内容完全加载后平滑过渡

DDD

发布： 2025-11-25 11:51:47

原创

190人浏览过

使用jQuery和CSS实现页面加载预加载器：确保内容完全加载后平滑过渡

本教程将指导您如何使用html、css和javascript（特别是jquery）实现一个页面加载预加载器。它将展示如何在页面内容（包括潜在的背景视频）完全加载后，通过平滑的动画效果隐藏gif预加载动画，从而提升用户体验，避免内容突然出现。

引言

在现代网页设计中，为了提升用户体验，我们常常在页面加载耗时较长时显示一个预加载器（Preloader）。这个预加载器通常是一个动画GIF，用于告知用户页面正在加载中，避免页面突然空白或内容零散出现。然而，一个常见的问题是，预加载器可能会在所有内容（特别是大型媒体文件，如背景视频或高清图片）完全加载并渲染之前就消失，导致用户看到页面内容突然跳出或布局重排，从而影响用户体验。本教程将提供一个健壮的解决方案，确保预加载器在页面所有关键资源加载完成后才平滑地隐藏。

核心技术概览

实现一个功能完善的预加载器，我们需要结合以下技术：

HTML： 构建预加载器的基本结构，包含一个容器和加载动画图片。
CSS： 定义预加载器的样式，使其覆盖整个页面，并实现平滑的消失动画。
JavaScript (jQuery)： 监听页面加载事件，并在合适的时机触发预加载器的隐藏动画。

HTML结构

首先，我们需要在HTML中为预加载器创建一个容器。这个容器通常放置在 <body> 标签的开头，以确保它在页面内容之前被渲染并显示。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>页面预加载器示例</title>
    <!-- 引入你的CSS样式文件 -->
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <!-- 预加载器容器 -->
    <div id="loading">
        <img id="loading-image" src="https://catulu.club/images/ch1-img.159861e81e6dc4bfca11.gif" alt="页面加载中...">
    </div>

    <!-- 你的页面主要内容 -->
    <main>
        <h1>欢迎来到我的网站</h1>
        <p>这里是页面的主要内容，包括文本、图片和背景视频等。</p>
        <!-- 示例背景视频，如果需要 -->
        <!-- <video autoplay loop muted playsinline src="your-background-video.mp4"></video> -->
    </main>

    <!-- 引入jQuery库，通常放在</body>标签结束前 -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <!-- 引入你的JavaScript文件 -->
    <script src="script.js"></script>
</body>
</html>

登录后复制

在上述代码中：

立即学习“前端免费学习笔记（深入）”；

div id="loading" 是预加载器的全屏容器。
img id="loading-image" 是实际显示的加载GIF动画。请确保 src 属性指向一个有效的GIF文件，并提供 alt 属性以增强可访问性。
jQuery 库的引入放在 </body> 结束标签之前，这是推荐的做法，可以避免阻塞页面内容的渲染。

CSS样式

接下来，我们为预加载器定义样式，使其能够覆盖整个屏幕，并实现居中显示加载动画。

/* style.css */

/* 预加载器容器样式 */
#loading {
  position: fixed; /* 固定定位，使其覆盖整个视口 */
  display: flex;   /* 使用Flexbox布局 */
  justify-content: center; /* 水平居中内容 */
  align-items: center;     /* 垂直居中内容 */
  width: 100%;     /* 宽度占满整个视口 */
  height: 100%;    /* 高度占满整个视口 */
  top: 0;          /* 距离顶部0 */
  left: 0;         /* 距离左侧0 */
  opacity: 1;      /* 初始透明度为1，完全可见 */
  background-color: #36395A; /* 背景颜色，可根据主题调整 */
  z-index: 9999;   /* 确保在所有其他内容之上 */
  transition: opacity 0.5s ease-out; /* 为透明度变化添加过渡效果 */
}

/* 加载图片样式（可选，可用于调整大小等） */
#loading-image {
  max-width: 100px; /* 限制GIF的最大宽度 */
  height: auto;     /* 高度自动 */
}

/* 当预加载器隐藏时，可以添加一个类来触发消失动画 */
/* .fade-out {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease-out, visibility 0.5s step-end;
} */

登录后复制

样式解释：

position: fixed;、top: 0;、left: 0;、width: 100%;、height: 100%;：这些属性共同作用，使 #loading 元素固定在视口中，并占据整个屏幕。
display: flex; justify-content: center; align-items: center;：利用 Flexbox 轻松实现加载GIF在容器内的水平和垂直居中。
background-color: #36395A;：设置预加载器的背景色，可以根据网站主题进行调整。
z-index: 9999;：确保预加载器始终显示在页面上的其他所有元素之上。
opacity: 1;：初始状态下，预加载器是完全可见的。
transition: opacity 0.5s ease-out;：为透明度变化添加平滑的过渡效果，当预加载器消失时，会有一个渐隐动画。

JavaScript (jQuery) 逻辑

现在，我们将使用jQuery来控制预加载器的显示和隐藏。核心思想是监听 window 对象的 load 事件，该事件在页面所有资源（包括图片、视频、CSS、JavaScript等）加载完成后触发。

AVCLabs

AI移除视频背景，100%自动和免费

268

查看详情

// script.js

// 当窗口所有资源加载完毕后执行
$(window).on('load', function() {
  // 可选：添加一个延迟，让用户有足够的时间看到加载动画，
  // 即使页面内容已经加载完成，这有助于提升感知体验，
  // 尤其是在背景视频等大文件加载完成后可能仍需短暂缓冲的情况下。
  setTimeout(removeLoader, 3000); // 页面加载完成 + 额外等待3秒
});

/**
 * 隐藏并移除预加载器
 */
function removeLoader() {
  // 使用fadeOut方法平滑地隐藏预加载器
  $("#loading").fadeOut(500, function() {
    // fadeOut动画完成后执行回调函数
    // 移除预加载器元素，使DOM更轻量，提高性能
    $(this).remove();
  });
}

登录后复制

JavaScript 逻辑解释：

$(window).on('load', function() { ... });：这是jQuery监听 window 的 load 事件的方式。与 DOMContentLoaded 事件不同，load 事件会等待所有外部资源（如图片、视频、字体等）都加载完毕后才触发。这对于确保背景视频等大型媒体文件完全准备就绪后再隐藏预加载器至关重要。
setTimeout(removeLoader, 3000);：这是一个可选的延迟。即使 load 事件已经触发，页面所有资源理论上都已加载，但有时为了更好的用户感知，或者给视频播放器一个额外的缓冲时间，我们可以设置一个短暂的延迟（例如3000毫秒，即3秒）。你可以根据实际需求调整或移除此延迟。
removeLoader() 函数：
- $("#loading").fadeOut(500, function() { ... });：jQuery 的 fadeOut() 方法会使选中的元素在指定的时间（这里是500毫秒）内逐渐变为透明并隐藏。动画完成后，会执行一个回调函数。
- $(this).remove();：在 fadeOut 动画完成后，我们通过 remove() 方法将整个 #loading 元素从DOM中移除。这样做的好处是清理DOM，使页面结构更简洁，并释放浏览器资源。

针对背景视频的考虑

$(window).on('load') 事件通常会等待包括 <video> 标签在内的所有资源加载完成。这意味着如果你的背景视频是通过 <video src="..."> 这种标准方式引入的，那么当 load 事件触发时，视频文件应该已经加载完毕（尽管可能还需要一点时间来缓冲）。

然而，在某些复杂场景下，例如：

视频是通过JavaScript动态加载的。
使用了第三方视频播放器库。
视频流需要额外的初始化时间。

在这种情况下，仅依靠 $(window).on('load') 可能不足以确保视频完全可播放。你可以考虑更精细的控制：

监听视频事件： 对 <video> 元素监听 canplaythrough 事件。此事件表示浏览器估计在不中断的情况下可以播放整个媒体文件。
多条件判断： 设置一个计数器或多个布尔标志，只有当 window.load 和所有关键视频的 canplaythrough 事件都触发后，才隐藏预加载器。

例如，如果你有一个ID为 myBackgroundVideo 的视频：

// 更高级的视频加载控制示例 (仅作参考，不包含在主教程代码中)
let pageLoaded = false;
let videoReady = false;

$(window).on('load', function() {
    pageLoaded = true;
    checkAndRemoveLoader();
});

$('#myBackgroundVideo').on('canplaythrough', function() {
    videoReady = true;
    checkAndRemoveLoader();
});

function checkAndRemoveLoader() {
    if (pageLoaded && videoReady) {
        setTimeout(removeLoader, 1000); // 稍微短一点的延迟
    }
}
// removeLoader 函数与上面相同

登录后复制

但对于大多数情况，本教程中提供的 $(window).on('load') 结合 setTimeout 的方案已经足够有效。

注意事项与最佳实践

jQuery 依赖： 本教程使用了 jQuery。如果你的项目不使用 jQuery，你需要用原生 JavaScript 实现类似的功能。原生JS可以使用 window.addEventListener('load', function() { ... }); 监听加载事件，并使用 document.getElementById('loading').style.opacity = '0'; 结合 setTimeout 和 remove() 来控制元素的显示和隐藏。
用户体验： 预加载器的动画应流畅且不卡顿。GIF文件大小应适中，避免因加载GIF本身而造成延迟。
动画平滑性： CSS transition 属性是实现平滑渐隐效果的关键。确保过渡时间合理，不要太快或太慢。
性能优化： 在预加载器消失后，将其从DOM中移除是一个很好的实践，可以保持DOM树的简洁，减少不必要的渲染负担。
可访问性： 为加载GIF图片提供有意义的 alt 文本，例如 "页面加载中..."，以便屏幕阅读器用户理解其作用。
自定义： 你可以自由定制预加载器的背景颜色、GIF图片、动画持续时间、延迟时间等，以匹配你的网站设计风格。