PreLoadMe 技术文档

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

登录后查看全文

项目优选

收起

kernel

deepin linux kernel

docs

OpenHarmony documentation | OpenHarmony开发者文档

🔥LeetCode solutions in any programming language | 多种编程语言实现 LeetCode、《剑指 Offer（第 2 版）》、《程序员面试金典（第 6 版）》题解

🎉 (RuoYi)官方仓库基于SpringBoot，Spring Security，JWT，Vue3 & Vite、Element Plus 的前后端分离权限管理系统

Nop Platform 2.0是基于可逆计算理论实现的采用面向语言编程范式的新一代低代码开发平台，包含基于全新原理从零开始研发的GraphQL引擎、ORM引擎、工作流引擎、报表引擎、规则引擎、批处理引引擎等完整设计。nop-entropy是它的后端部分，采用java语言实现，可选择集成Spring框架或者Quarkus框架。中小企业可以免费商用

Java

gitea

喝着茶写代码！最易用的自托管一站式代码托管平台，包含Git托管，代码审查，团队协作，软件包和CI/CD。

ops-math

本项目是CANN提供的数学类基础计算算子库，实现网络在NPU上加速计算。

🎉 基于Spring Boot、Spring Cloud & Alibaba、Vue3 & Vite、Element Plus的分布式前后端分离微服务架构权限管理系统