首页
/ PreLoadMe 技术文档

PreLoadMe 技术文档

2024-12-23 14:10:48作者：舒璇辛Bertina
PreLoadMe
PreLoadMe, a lightweight jQuery website preloader.
项目地址：https://gitcode.com/gh_mirrors/pr/PreLoadMe

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
PreLoadMe, a lightweight jQuery website preloader.
项目地址：https://gitcode.com/gh_mirrors/pr/PreLoadMe

相关内容推荐

1 《PreLoadMe 轻量级加载动画的安装与使用教程》2 轻量化预加载利器：PreLoadMe应用实践分享3 slowmoVideo 技术文档4 IdeaVim 技术文档5 Octobot 技术文档6 Shoreman 技术文档7 jsonpretty 技术文档8 Propel2 技术文档9 Pykka 技术文档10 Rubygame 技术文档
热门项目推荐
相关项目推荐

热门内容推荐

1 开发者路线图项目教程2 Vue.js 教程与指南3 探索Vue 2的持久魅力：一个开源项目的深度解析4 开源项目指南：Linux 内核5 推荐项目：探索 Linux 内核的奥秘6 Linux内核项目技术文档7 TensorFlow 开源项目教程8 TensorFlow：开启机器学习新纪元9 TensorFlow 开源项目指南10 探索Oh My Zsh：提升你的终端体验

最新内容推荐

《深入掌握OpenPTrack：安装与实战指南》 《RBM-MNIST深度学习算法安装与实战指南》 《Boundingmesh项目实战指南：安装、配置与深度探索》 探索三维世界：cpu_tsdf开源项目的安装与使用教程 探索Embxx：嵌入式C++库的安装与使用指南 深入解析Valijson：安装、使用与实践指南 《稳健点集配准算法GMMReg的安装与使用教程》 《luacppinterface：C++与Lua混合编程的桥梁》 深入掌握makerscanner：安装与使用指南 《SoftModem：开源的Arduino与手机通信解决方案》

项目优选

收起
Python-100-DaysPython-100-Days
Python - 100天从新手到大师
Python
610
115
HarmonyOS-ExamplesHarmonyOS-Examples
本仓将收集和展示仓颉鸿蒙应用示例代码，欢迎大家投稿，在仓颉鸿蒙社区展现你的妙趣设计！
Cangjie
286
79
mdmd
✍ WeChat Markdown Editor | 一款高度简洁的微信 Markdown 编辑器：支持 Markdown 语法、色盘取色、多图上传、一键下载文档、自定义 CSS 样式、一键重置等特性
Vue
111
25
openHiTLSopenHiTLS
旨在打造算法先进、性能卓越、高效敏捷、安全可靠的密码套件，通过轻量级、可剪裁的软件技术架构满足各行业不同场景的多样化要求，让密码技术应用更简单，同时探索后量子等先进算法创新实践，构建密码前沿技术底座！
C
60
48
RuoYi-Cloud-Vue3RuoYi-Cloud-Vue3
🎉 基于Spring Boot、Spring Cloud & Alibaba、Vue3 & Vite、Element Plus的分布式前后端分离微服务架构权限管理系统
Vue
45
29
go-stockgo-stock
🦄🦄🦄AI赋能股票分析：自选股行情获取，成本盈亏展示，涨跌报警推送，市场整体/个股情绪分析，K线技术指标分析等。数据全部保留在本地。支持DeepSeek，OpenAI， Ollama，LMStudio，AnythingLLM，硅基流动，火山方舟，阿里云百炼等平台或模型。
Go
1
0
Cangjie-ExamplesCangjie-Examples
本仓将收集和展示高质量的仓颉示例代码，欢迎大家投稿，让全世界看到您的妙趣设计，也让更多人通过您的编码理解和喜爱仓颉语言。
Cangjie
205
57
MateChatMateChat
前端智能化场景解决方案UI库，轻松构建你的AI应用，我们将持续完善更新，欢迎你的使用与建议。 官网地址：https://matechat.gitcode.com
376
36
RuoYi-VueRuoYi-Vue
🎉 基于SpringBoot，Spring Security，JWT，Vue & Element 的前后端分离权限管理系统，同时提供了 Vue3 的版本
Java
182
44
frogfrog
这是一个人工生命试验项目，最终目标是创建“有自我意识表现”的模拟生命体。
Java
8
0