PreLoadMe 技术文档

2024-12-24 13:25:40作者：舒璇辛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 预加载器了。

登录后查看全文

PreLoadMe 技术文档

1. 安装指南

1.1 引入 jQuery

1.2 引入 PreLoadMe 脚本

1.3 引入 CSS 样式

1.4 添加 HTML 结构

2. 项目的使用说明

2.1 基本使用

2.2 与 AJAX 请求一起使用

3. 项目 API 使用文档

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

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

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

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

4. 项目安装方式

4.1 下载项目

4.2 引入项目文件

4.3 配置项目

最新内容推荐

项目优选

PreLoadMe 技术文档

1. 安装指南

1.1 引入 jQuery

1.2 引入 PreLoadMe 脚本

1.3 引入 CSS 样式

1.4 添加 HTML 结构

2. 项目的使用说明

2.1 基本使用

2.2 与 AJAX 请求一起使用

3. 项目 API 使用文档

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

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

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

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

4. 项目安装方式

4.1 下载项目

4.2 引入项目文件

4.3 配置项目

相关内容推荐

最新内容推荐

项目优选

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

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

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

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