PreLoadMe，一个轻量级的jQuery网站预加载程序。
Posted
tags:
中文标题：PreLoadMe，一个轻量级的jQuery网站预加载程序。 原文标题：PreLoadMe, a lightweight jQuery website preloader. 项目评级：Star:274 Fork:75 下载地址：https://github.com/niklausgerber/PreLoadMe 详情介绍PreLoadMe，一个轻量级jQuery网站预加载程序
PreLoadMe是一个适用于任何网络内容的轻量级预加载程序。它由jQuery和CSS提供支持，响应能力强，将在所有现代桌面和移动浏览器上运行，无需额外的插件。PreLoadMe会显示一个加载动画，直到浏览器获取整个网络内容，并在页面被完全抓取时淡出。由于PreLoadMe的简单性，它可以很容易地进行定制并适应您的需求。
PreLoadMe会显示加载动画，直到浏览器获取整个web内容，并在页面完全缓存后淡出。由于PreLoadMe的简单性，它可以很容易地进行定制并适应您的需求。
您可以在此处看到实时预览：PreLoadMe实时预览
实施
PreLoadMe是由jQuery驱动的。您需要实现最新的jQuery版本和相应的JavaScript来执行预加载程序。在</body>标签前添加以下代码。
<!-- jQuery Plugin -->
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<!-- Preloader -->
<script type="text/javascript">
//<![CDATA[
$(window).on('load', function() // makes sure the whole site is loaded
$('#status').fadeOut(); // will first fade out the loading animation
$('#preloader').delay(350).fadeOut('slow'); // will fade out the white DIV that covers the website.
$('body').delay(350).css('overflow':'visible');
)
//]]>
</script>
CSS标记将帮助您设计预加载程序的样式。请确保将其包含在您的网站上。
body
overflow: hidden;
/* Preloader */
#preloader
position: fixed;
top:0;
left:0;
right:0;
bottom:0;
background-color:#fff; /* change if the mask should have another color then white */
z-index:99; /* makes sure it stays on top */
#status
width:200px;
height:200px;
position:absolute;
left:50%; /* centers the loading animation horizontally one the screen */
top:50%; /* centers the loading animation vertically one the screen */
background-image:url(../img/status.gif); /* path to your loading animation */
background-repeat:no-repeat;
background-position:center;
margin:-100px 0 0 -100px; /* is width and height divided by two */
最后，将以下HTML代码直接放在<body>标记之后。
<!-- Preloader -->
<div id="preloader">
<div id="status"> </div>
</div>
外部DIVpreloader将从CSS文件中调用，并用白色DIV覆盖整个网站。内部DIVstatus将显示加载动画。此外，您不应该忘记为您的文档提供一个合适的doctype。否则，预加载程序可能无法工作。
与AJAX请求一起使用
如果您想在AJAX请求期间显示预加载程序，您可以使用以下CSS代码。
#preloader
position:fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
background-color:#fff; /* change if the mask should have another color then white */
z-index:99; /* makes sure it stays on top */
#status
width:200px;
height:200px;
position:absolute;
left:50%; /* centers the loading animation horizontally one the screen */
top:50%; /* centers the loading animation vertically one the screen */
background-image:url(../img/status.gif); /* path to your loading animation */
background-repeat:no-repeat;
background-position:center;
margin:-100px 0 0 -100px; /* is width and height divided by two */
您的Javascript代码将如下所示：
$("#status").fadeIn();
$("#preloader").fadeIn();
$.get(url, data, function()
$("#status").fadeOut();
$("#preloader").fadeOut();
);
源程序包包含所有相关文件和一个工作演示。
信用
请支持humans.txt(http://humanstxt.org/). 这是一个了解网站背后的人的倡议。这是一个TXT文件，其中包含了为网站建设做出贡献的不同人员的信息。
PreLoadMe: https://github.com/niklausgerber/PreLoadMe
Niklaus Gerber
Twitter: @niklausgerber
URL: https://www.niklausgerber.com
Location: Zürich, Switzerland
下载、分叉、提交。
如果你认为你可以做得更好，请下载，Fork，&；犯罪我很想看看你的想法。
捐赠物
我喜欢创作，我不会要求偿还。如果你欣赏我的工作并愿意支持我，我相信你会获得一些额外的因果报应积分。请捐款。
我想用JS HTML CSS JQuery创建一个预加载屏幕（可选），没有后端