1、使用定时器来做网页加载定时器(先由一个加载的div覆盖住网页,过几秒钟消失),不切合实际
好用的加载图片,给大家推荐一个网站:https://icons8.com/preloaders/en/free
<style type="text/css">
* { margin: 0; padding: 0; }
.loading { position: fixed; width: 100%; height: 100%; background: #fff; z-index: 100; } // 加载的图片盖住页面内容
// left: 0; right: 0; top: 0; bottom: 0; margin: auto;可以居中
.pic { position: absolute; background: url('./images/1.gif') no-repeat; width: 64px; height: 64px; background-size: 64px 64px; left: 0; right: 0; top: 0; bottom: 0; margin: auto;}</style>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
setInterval(function () {
$('.loading').fadeOut(); // 过三秒之后,加载的图片消失
}, 3000);
})
</script>
<div class="loading"><div class="pic"></div></div>
2、通过加载事件制作进度条
document.onreadystatechange:页面加载状态改变时的事件
document.readyState:返回当前文档的状态包括:
(1)uninitialized:还未开始载入(2)loading:载入中
(3)interactive:已加载,文档与用户可以开始交互 (4)complete:载入完成
<script type="text/javascript">
document.onreadystatechange = function () { // 当文档加载状态改变时
if (document.readyState == 'complete') { // 当文档状态完成时
$('.loading').fadeOut();
}
}
</script>
3、不使用图片,使用css动画
可以在线生成css动画的网站:https://loading.io/
在线补全css兼容的网站:http://autoprefixer.github.io/
4、定位在头部的加载条:根据文档是从上而下加载的
<style type="text/css">
* { margin: 0; padding: 0; }
.loading { position: fixed; width: 100%; height: 100%; background: #fff; z-index: 100; }
.pic { position: absolute; width: 0; height: 5px; top: 0; background: red;}
</style>
<div class="loading"><div class="pic"></div></div>
<header></header>
<script type="text/javascript">
$('.pic').animate({ width: "30%" }, 100) // 当加载完头的时候,长度。。。
</script>
<section></section>
<script type="text/javascript">
$('.pic').animate({ width: "60%" }, 100) // 当加载完section时,长度。。。。
</script>
<section></section>
<script type="text/javascript">
$('.pic').animate({ width: "90%" }, 100)
</script>
<footer></footer>
<script type="text/javascript">
$('.pic').animate({ width: "100%" }, 100, function () { // 当加载完底部时,长度100%,隐藏
$('.loading').fadeOut();
})
</script>
5、实时获取加载进度条:根据网页中的图片,当图片都加载完后
实现半圆转动:其实半圆是垂直阴影
<style type="text/css">
* { margin: 0; padding: 0; }
.loading { position: fixed; width: 100%; height: 100%; background: #fff; z-index: 100; }
.pic { position: absolute;width: 100px; height: 100px; left: 0; right: 0; top: 0; bottom: 0; margin: auto; text-align:center; line-height: 100px; font-size:25px;}
.pic span { position: absolute;top: 10px;left:10px;display: block;width: 80px;height: 80px;border-radius: 50%;box-shadow: 0 3px 0 #ccc; animation: round 1s infinite linear;}
@keyframes round { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); }}
</style>
<script type="text/javascript">
$(function () {
var img = $('img'); // 获取所有图片
var num = 0;
img.each(function (i) {
var oImg = new Image();
oImg.src = img[i].src;
oImg.onload = function () { // 当图片加载好后
oImg.onload = null; // 清除重复请求
num++;
$(".loading b").html(parseInt(num/($('img').length) * 100) + '%'); // 实时百分比
if (num >= $('img').length) {
$(".loading").fadeOut();
}
}
})
});
</script>
<div class="loading">
<div class="pic">
<span></span>
<b>0%</b>
</div>
</div>
效果: