PreLoadMe 开源项目使用教程-CSDN博客

本文链接：https://blog.csdn.net/gitblog_00598/article/details/141515035

PreLoadMe 开源项目使用教程

PreLoadMePreLoadMe, a lightweight jQuery website preloader.项目地址:https://gitcode.com/gh_mirrors/pr/PreLoadMe

1. 项目的目录结构及介绍

PreLoadMe 项目的目录结构相对简单，主要包含以下文件和文件夹：

PreLoadMe/
├── css/
│   └── style.css
├── img/
│   └── status.gif
├── .gitignore
├── LICENSE.txt
├── README.md
├── index.html
└── script.js

css/: 包含项目的样式文件 style.css。
img/: 包含项目中使用的图像文件 status.gif。
.gitignore: 指定 Git 版本控制系统忽略的文件和文件夹。
LICENSE.txt: 项目的许可证文件，采用 MIT 许可证。
README.md: 项目的说明文档。
index.html: 项目的主页面文件。
script.js: 项目的 JavaScript 脚本文件。

2. 项目的启动文件介绍

项目的启动文件是 index.html。这个文件包含了项目的核心结构和初始化代码。以下是 index.html 的主要内容：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PreLoadMe</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <!-- Preloader -->
    <div id="preloader">
        <div id="status">&nbsp;</div>
    </div>

    <!-- jQuery Plugin -->
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
    <!-- Preloader -->
    <script type="text/javascript" src="script.js"></script>
</body>
</html>

<div id="preloader">: 预加载器的主要结构，包含一个 #status 元素用于显示加载动画。
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.3.min.js"></script>: 引入 jQuery 库。
<script type="text/javascript" src="script.js"></script>: 引入项目的 JavaScript 脚本文件。

3. 项目的配置文件介绍

PreLoadMe 项目没有明确的配置文件，但可以通过修改 script.js 和 css/style.css 文件来进行配置。

`script.js`

script.js 文件包含了预加载器的核心逻辑：

$(window).on('load', function() {
    // 确保整个网站加载完毕
    $('#status').fadeOut(); // 淡出加载动画
    $('#preloader').delay(350).fadeOut('slow'); // 淡出覆盖整个网站的白色 DIV
    $('body').delay(350).css('overflow', 'visible');
});

$(window).on('load', function() { ... });: 当窗口加载完毕时执行的函数。
$('#status').fadeOut();: 淡出加载动画。
$('#preloader').delay(350).fadeOut('slow');: 延迟 350 毫秒后淡出覆盖整个网站的白色 DIV。
$('body').delay(350).css('overflow', 'visible');: 延迟 350 毫秒后恢复 body 的滚动条。

`css/style.css`

css/style.css 文件包含了预加载器的样式：

/* Preloader */
#preloader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #fff; /* 改变遮罩颜色 */
    z-index: 99; /* 确保在最上层 */
}

#status {
    width: 200px;
    height: 200px;
    position: absolute;
    left: 50%; /* 水平居中 */
    top: 50%; /* 垂直居中 */

PreLoadMePreLoadMe, a lightweight jQuery website preloader.项目地址:https://gitcode.com/gh_mirrors/pr/PreLoadMe