骨架屏是结合了懒加载功能,在页面没有加载完成之前,先呈现页面基本结构。
可以有三种实现方式:
1、在页面元素后面增加一个骨架div,当页面加载完成后就隐藏这个div
2、在页面元素结构中先嵌入骨架div,当页面加载完成后就替换这个div
3、通过伪元素实现骨架样式,通过操作样式实现骨架和页面的动态切换
实现代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
@-webkit-keyframes skeleton-ani {
0% {
left: -90%
}
to {
left: 120%
}
}
@keyframes skeleton-ani {
0% {
left: -90%
}
to {
left: 120%
}
}
.skt-loading .skeleton {
position: relative;
overflow: hidden;
border: none !important;
border-radius: 5px;
background-color: rgba(0, 0, 0, 0) !important;
background-image: none !important;
pointer-events: none;
}
.skt-loading .skeleton:after {
content: "";
position: absolute;
left: 0;
top: 0;
z-index: 9;
width: 100%;
height: 100%;
background-color: #ebf1f8;
display: block
}
.skt-loading .skeleton:not(.not-round):after {
border-radius: 4px
}
.skt-loading .skeleton:not(.not-before):before {
position: absolute;
top: 0;
width: 30%;
height: 100%;
content: "";
background: -webkit-gradient(linear, left top, right top, color-stop(0, hsla(0, 0%, 100%, 0)), color-stop(50%, hsla(0, 0%, 100%, .3)), to(hsla(0, 0%, 100%, 0)));
background: -o-linear-gradient(left, hsla(0, 0%, 100%, 0) 0, hsla(0, 0%, 100%, .3) 50%, hsla(0, 0%, 100%, 0) 100%);
background: linear-gradient(90deg, hsla(0, 0%, 100%, 0) 0, hsla(0, 0%, 100%, .3) 50%, hsla(0, 0%, 100%, 0));
-webkit-transform: skewX(-45deg);
-ms-transform: skewX(-45deg);
transform: skewX(-45deg);
z-index: 99;
-webkit-animation: skeleton-ani 1s ease infinite;
animation: skeleton-ani 1s ease infinite;
display: block
}
.skt-loading .skeleton.badge:after {
background-color: #f8fafc
}
input {
border: 1px solid #dcdcdc;
width: 100%;
}
</style>
</head>
<body>
<div id="skt-main" class="skt-loading">
<form>
<label class="skeleton">姓名:</label>
<div class="skeleton">
<input type="text" name="">
</div>
<br>
<label class="skeleton">爱好:</label>
<div class="skeleton">
<input type="text" name="">
</div>
</form>
</div>
<script>
setTimeout(() => {
var $sktmain = document.getElementById('skt-main');
$sktmain.className = $sktmain.className.replace('skt-loading', '')
}, 2000)
</script>
</body>
</html>