首页
/ 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 Octobot 技术文档2 Pykka 技术文档3 jsonpretty 技术文档4 micromodels 技术文档5 Mongoose 技术文档6 Pylearn2 技术文档7 WhatMP3 技术文档8 RESTClient 技术文档9 Speedometer 技术文档10 RubberBand 技术文档
热门项目推荐
相关项目推荐

热门内容推荐

1 开发者路线图项目教程2 Vue.js 教程与指南3 探索Vue 2的持久魅力：一个开源项目的深度解析4 开源项目 `awesome-selfhosted` 使用教程5 TensorFlow 开源项目指南6 TensorFlow 开源项目教程7 TensorFlow：开启机器学习新纪元8 推荐项目：探索 Linux 内核的奥秘9 开源项目指南：Linux 内核10 Linux内核项目技术文档

最新内容推荐

Mineflayer 技术文档 Clean-CSS 技术文档 JavaScript Load Image 使用详解 SoundJS 技术文档 ws: Node.js WebSocket 库技术文档 Sugar 项目技术文档 Backbone Boilerplate 使用与技术文档 hello.js 技术文档 TinyColor 技术文档 doT.js 技术文档

项目优选

收起
openHiTLSopenHiTLS
旨在打造算法先进、性能卓越、高效敏捷、安全可靠的密码套件，通过轻量级、可剪裁的软件技术架构满足各行业不同场景的多样化要求，让密码技术应用更简单，同时探索后量子等先进算法创新实践，构建密码前沿技术底座！
C
46
34
PDFMathTranslatePDFMathTranslate
PDF scientific paper translation with preserved formats - 基于 AI 完整保留排版的 PDF 文档全文双语翻译，支持 Google/DeepL/Ollama/OpenAI 等服务，提供 CLI/GUI/Docker
Python
25
2
Cangjie-ExamplesCangjie-Examples
本仓将收集和展示高质量的仓颉示例代码，欢迎大家投稿，让全世界看到您的妙趣设计，也让更多人通过您的编码理解和喜爱仓颉语言。
Cangjie
171
39
RuoYi-VueRuoYi-Vue
🎉 基于SpringBoot，Spring Security，JWT，Vue & Element 的前后端分离权限管理系统，同时提供了 Vue3 的版本
Java
164
33
HarmonyOS-ExamplesHarmonyOS-Examples
本仓将收集和展示仓颉鸿蒙应用示例代码，欢迎大家投稿，在仓颉鸿蒙社区展现你的妙趣设计！
Cangjie
248
63
RuoYi-Cloud-Vue3RuoYi-Cloud-Vue3
🎉 基于Spring Boot、Spring Cloud & Alibaba、Vue3 & Vite、Element Plus的分布式前后端分离微服务架构权限管理系统
Vue
21
17
CangjieCommunityCangjieCommunity
为仓颉编程语言开发者打造活跃、开放、高质量的社区环境
Markdown
892
0
GitCode光引计划有奖征文大赛GitCode光引计划有奖征文大赛
GitCode光引计划有奖征文大赛
16
1
RuoYi-CloudRuoYi-Cloud
🎉 基于Spring Boot、Spring Cloud & Alibaba的分布式微服务架构权限管理系统，同时提供了 Vue3 的版本
Java
25
10
advanced-javaadvanced-java
Advanced-Java是一个Java进阶教程，适合用于学习Java高级特性和编程技巧。特点：内容深入、实例丰富、适合进阶学习。
JavaScript
389
102