PreLoadMe 技术文档

2024-12-24 06:46:45作者：舒璇辛Bertina

1. 安装指南

1.1 引入 jQuery

PreLoadMe 是一个基于 jQuery 的轻量级网页预加载器。首先，你需要在项目中引入最新版本的 jQuery。将以下代码添加到 HTML 文件的 </body> 标签之前：

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

1.2 引入 PreLoadMe 脚本

接下来，引入 PreLoadMe 的 JavaScript 代码。将以下代码添加到 jQuery 引入代码的下方：

<!-- Preloader -->
<script type="text/javascript">
    //<![CDATA[
        $(window).on('load', function() { // 确保整个网站加载完成
            $('#status').fadeOut(); // 首先淡出加载动画
            $('#preloader').delay(350).fadeOut('slow'); // 淡出覆盖整个网站的白色 DIV
            $('body').delay(350).css({'overflow':'visible'});
        })
    //]]>
</script>

1.3 引入 CSS 样式

为了正确显示预加载器，你需要在项目中引入相应的 CSS 样式。将以下代码添加到你的 CSS 文件中：

body {
    overflow: hidden;
}

/* 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%; /* 垂直居中加载动画 */
    background-image:url(../img/status.gif); /* 加载动画的路径 */
    background-repeat:no-repeat;
    background-position:center;
    margin:-100px 0 0 -100px; /* 宽度与高度的一半 */
}

1.4 添加 HTML 结构

最后，在 HTML 文件的 <body> 标签之后添加以下代码：

<!-- Preloader -->
<div id="preloader">
    <div id="status">&nbsp;</div>
</div>

2. 项目的使用说明

2.1 基本使用

PreLoadMe 会在浏览器加载整个网页内容时显示一个加载动画，并在页面完全缓存后淡出。通过简单的 CSS 和 JavaScript 代码，你可以轻松定制和适应你的需求。

2.2 与 AJAX 请求一起使用

如果你希望在 AJAX 请求期间显示预加载器，可以使用以下 CSS 和 JavaScript 代码：

#preloader {
    position:fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;		
    background-color:#fff; /* 如果需要更改遮罩颜色，可以修改此处的颜色 */
    z-index:99; /* 确保遮罩始终在最上层 */
}		

#status {
    width:200px;
    height:200px;
    position:absolute;
    left:50%; /* 水平居中加载动画 */
    top:50%; /* 垂直居中加载动画 */
    background-image:url(../img/status.gif); /* 加载动画的路径 */
    background-repeat:no-repeat;
    background-position:center;
    margin:-100px 0 0 -100px; /* 宽度与高度的一半 */
}

$("#status").fadeIn();
$("#preloader").fadeIn();
$.get(url, data, function(){
    $("#status").fadeOut();
    $("#preloader").fadeOut();
});

3. 项目 API 使用文档

PreLoadMe 的 API 非常简单，主要通过 jQuery 的事件绑定和动画效果来实现预加载功能。以下是主要的 API 调用：

3.1 `$(window).on('load', function() { ... })`

描述: 监听窗口的 load 事件，确保整个页面加载完成后再执行预加载器的淡出动画。
参数: 无
返回值: 无

3.2 `$('#status').fadeOut()`

描述: 淡出加载动画。
参数: 无
返回值: 无

3.3 `$('#preloader').delay(350).fadeOut('slow')`

描述: 延迟 350 毫秒后淡出覆盖整个网站的白色 DIV。
参数:
- delay(350): 延迟 350 毫秒
- fadeOut('slow'): 缓慢淡出
返回值: 无

3.4 `$('body').delay(350).css({'overflow':'visible'})`

描述: 延迟 350 毫秒后将 body 的 overflow 属性设置为 visible，以恢复页面的滚动。
参数:
- delay(350): 延迟 350 毫秒
- css({'overflow':'visible'}): 设置 overflow 属性
返回值: 无

4. 项目安装方式

4.1 下载项目

你可以从 GitHub 仓库下载 PreLoadMe 的源代码：

git clone https://github.com/niklausgerber/PreLoadMe.git

4.2 引入项目文件

将下载的文件解压后，将 jquery-1.12.3.min.js 和 preloader.js 文件引入到你的项目中。

4.3 配置项目

根据上述安装指南中的步骤，配置 HTML、CSS 和 JavaScript 文件，确保预加载器能够正常工作。

通过以上步骤，你就可以成功安装并使用 PreLoadMe 预加载器了。

登录后查看全文