Dragon

使用 HTML+CSS 实现网页 loading 加载效果,支持定时或加载完成后隐藏

2022-10-31 12:43 133 3 条评论 阿峰博客

网页使用loading可以给用户带来更好的体验,避免网页渲染中长时间出现网页整体空白从而影响访客的体验,loading在部分大型 APP 也有在应用。
使用 HTML+CSS 实现网页 loading 加载效果,支持定时或加载完成后隐藏插图
下面使用 HTML+CSS+JS 实现完整的 Loading效果
请先引入 jQuery,因为 JS 定时隐藏依赖 jq。

1.HTML

<div class="loaderbg">
<div class="spinner">
<div class="double rect1"></div>
<div class="double rect2"></div>
<div class="double rect3"></div>
<div class="double rect4"></div>
<div class="double rect5"></div>
</div>
</div>

loaderbg类为loading的背景色,为白色。

2.CSS

.loaderbg {
background-color: #fff;
width: 100%;
height: 100%;
overflow: hidden;
position: fixed;
left: 0;
top: 0;
z-index: 99999999
}
::-webkit-scrollbar {
width: 7.5px;
height: 6px;
background-color: #f0f0f0;
display: none
}
::-webkit-scrollbar-thumb {
background-color: #b1b1b1;
border-radius: 15px
}
::-webkit-scrollbar-thumb:hover {
background-color: #777
}
.spinner {
position: absolute;
top: 50%;
left: 50%;
margin-left: -25px;
margin-top: -30px;
width: 50px;
height: 60px;
text-align: center;
font-size: 10px
}
.spinner>.double {
background: #49a9ee;
height: 100%;
width: 6px;
display: inline-block;
-webkit-animation: stretchDelay 1.2s infinite ease-in-out;
animation: stretchDelay 1.2s infinite ease-in-out
}
.spinner .rect2 {
-webkit-animation-delay: -1.1s;
animation-delay: -1.1s
}
.spinner .rect3 {
-webkit-animation-delay: -1.0s;
animation-delay: -1.0s
}
.spinner .rect4 {
-webkit-animation-delay: -0.9s;
animation-delay: -0.9s
}
.spinner .rect5 {
-webkit-animation-delay: -0.8s;
animation-delay: -0.8s
}
@-webkit-keyframes stretchDelay {
0%,
40%,
100% {
-webkit-transform: scaleY(.4)
}
20% {
-webkit-transform: scaleY(1)
}
}
@keyframes stretchDelay {
0%,
40%,
100% {
transform: scaleY(.4);
-webkit-transform: scaleY(.4)
}
20% {
transform: scaleY(1);
-webkit-transform: scaleY(1)
}
}

3.JS

js 在这里的作用为定时或网页加载完成后关闭loaderbg

//页面加载完成之后隐藏loading
$(window).load(function () {
$(".loaderbg").hide();
});
//设置页面加载3 秒之后隐藏loading
/*$(function () {
setTimeout(function () {
$(".loaderbg").hide();
alert("页面加载完成啦!");
},3000);
})*/

第一种方法是等待网页全部加载完成后再隐藏loading,但同时如果网页其他资源文件加载缓慢(如图片等),loading也会随之存在更长时间。
第二中方法是设置定时隐藏loading,可以根据实际需求更改隐藏时间,默认为 3s。
建议实际使用时,删除 alert("页面加载完成啦!"); 避免引起用户反感,只做效果测试。
以上第一种方法 jquery 低版本测试正常,高版本可能会报错:ncaught TypeError: a.indexOf is not a function
at r.fn.load
原因是在 jQuery 3.x 中取消了 load(),将 $(window).load(function () { 替换为 $(window).on('load',function(){ 即可,如:

$(window).on('load',function(){
$(".loaderbg").hide();
});

同时考虑到如果用户的浏览器侧不支持 JavaScript 或者 JavaScript 被禁用,需要使用 noscript 标签,添加 display:none 属性即可,noscript 只会在浏览器环境不支持 JS 或者 JS 被禁用才会执行

<noscript>
<style>
.loaderbg {
display: none;
}
</style>
</noscript>

4.实例代码:

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>使用 HTML+CSS 实现网页loading加载效果,支持定时或加载完成后隐藏 _ 阿峰博客</title>
<script src="https://libs.afengim.com/libs/jquery-3.1.1/jquery-3.1.1.min.js" type="application/javascript"></script>
<style>
.loaderbg {
background-color: #fff;
width: 100%;
height: 100%;
overflow: hidden;
position: fixed;
left: 0;
top: 0;
z-index: 99999999
}
::-webkit-scrollbar {
width: 7.5px;
height: 6px;
background-color: #f0f0f0;
display: none
}
::-webkit-scrollbar-thumb {
background-color: #b1b1b1;
border-radius: 15px
}
::-webkit-scrollbar-thumb:hover {
background-color: #777
}
.spinner {
position: absolute;
top: 50%;
left: 50%;
margin-left: -25px;
margin-top: -30px;
width: 50px;
height: 60px;
text-align: center;
font-size: 10px
}
.spinner > .double {
background: #49a9ee;
height: 100%;
width: 6px;
display: inline-block;
-webkit-animation: stretchDelay 1.2s infinite ease-in-out;
animation: stretchDelay 1.2s infinite ease-in-out
}
.spinner .rect2 {
-webkit-animation-delay: -1.1s;
animation-delay: -1.1s
}
.spinner .rect3 {
-webkit-animation-delay: -1.0s;
animation-delay: -1.0s
}
.spinner .rect4 {
-webkit-animation-delay: -0.9s;
animation-delay: -0.9s
}
.spinner .rect5 {
-webkit-animation-delay: -0.8s;
animation-delay: -0.8s
}
@-webkit-keyframes stretchDelay {
0%,
40%,
100% {
-webkit-transform: scaleY(.4)
}
20% {
-webkit-transform: scaleY(1)
}
}
@keyframes stretchDelay {
0%,
40%,
100% {
transform: scaleY(.4);
-webkit-transform: scaleY(.4)
}
20% {
transform: scaleY(1);
-webkit-transform: scaleY(1)
}
}
</style>
</head>
<body>
<!--html-->
<div class="loaderbg">
<div class="spinner">
<div class="double rect1"></div>
<div class="double rect2"></div>
<div class="double rect3"></div>
<div class="double rect4"></div>
<div class="double rect5"></div>
</div>
</div>
<!--end-->
<p>
<a href="https://www.afengblog.com/website-loading.html" target="_blank"><strong>使用 HTML+CSS 实现网页loading加载效果,支持定时或加载完成后隐藏,地址:https://www.afengblog.com/website-loading.html</strong></a>
</p>
<!--noscript-->
<noscript>
<style>
.loaderbg {
display: none;
}
</style>
</noscript>
<!--end-->
<!--script-->
<script type="text/javascript">
//页面加载完成之后隐藏loading
/*$(window).load(function () {
$(".loaderbg").hide();
});*/
//设置页面加载3 秒之后隐藏loading
$(function () {
setTimeout(function () {
$(".loaderbg").hide();
alert("页面加载完成啦!");
}, 3000);
})
</script>
<!--end-->
</body>
</html>

Demo 地址:https://tools.afengim.com/demo/loading/loading-1/

「点点赞赏,手留余香」

还没有人赞赏,快来当第一个赞赏的人吧!

阿峰博客给阿峰博客打赏
×
予人玫瑰,手有余香
  • 1
  • 5
  • 10
  • 20
  • 50
1
支付

本文为原创文章,版权归所有,欢迎分享本文,转载请保留出处!

2022-11-25

2022-10-31

发表评论

本站已严格贯彻落实《互联网跟帖评论服务管理规定》 注册账号需绑定并验证手机号真实性
评论
正在努力加载中...
  • 您可享受35%的返佣现金哦~