文章出處
文章列表
所謂內容占位技術，意思是說在內容比較多，數據量大的情況下，可以事先將一些標簽替代它們的位置，等到加載完畢的時候再將其隱藏。注意這和以前的圖片懶加載不是一個意思，兩個不起沖突，圖片懶加載的原理就是事先用一個較小的loading圖片，等用戶到達這個位置的高度時再去獲取相應的數據。內容占位技術就是模擬它可能會顯示出來的樣子。
比如下面這個頁面，不好意思打了馬賽克
再還沒有加載內容出來時，我們可以這樣。
因為是gif的圖片，效果并不是特別好，直接把上面代碼拷貝到你的文件里面打開。這里只做了一部分（量寬高太麻煩了）
其中代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>dome</title>
<style>
body{
width:640px;
margin:0 auto;
background-color:#fff;
}
@keyframes placeHolderShimmer{
0%{
background-position: -640px 0
}
100%{
background-position: 640px 0
}
}
.box {
animation-duration: 1s;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
animation-name: placeHolderShimmer;
animation-timing-function: linear;
background: #f6f7f8;
background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
background-size: 800px 104px;
position: relative;
height:100vh;
}
[class^="box-"]{
position:absolute;
background-color:#fff;
}
.box-bar-0{
left:60px;
top:0;
width:10px;
height:50px;
}
.box-bar-1{
left:60px;
top:0;
width:calc(100% - 50px);
height:20px;
}
.box-bar-2{
left:60px;
top:calc(60px - 25px);
width:calc(100% - 50px);
height:20px;
}
.box-bar-3{
right: 0;
top: 20px;
width: 25%;
height: 16px;
}
.box-bar-4{
left: 0;
top: 50px;
width: 100%;
height: 16px;
}
.box-bar-5{
left: 110px;
top: 66px;
width: 20px;
height: 132px;
}
.box-bar-6{
left: 110px;
top: 86px;
width: calc(100% - 110px);
height: 10px;
}
.box-bar-7{
left: 220px;
top: 98px;
width: 300px;
height: 10px;
}
.box-bar-8{
left: 110px;
top: 110px;
width: calc(100% - 110px);
height: 48px;
}
.box-bar-9{
left: 272px;
top: 166px;
width: calc(100% - 110px);
height: 12px;
}
.box-bar-10{
left: 272px;
top: 184px;
width: calc(100% - 110px);
height: 12px;
}
</style>
</head>
<body>
<div class="box">
<div class="box-bar-0"></div>
<div class="box-bar-1"></div>
<div class="box-bar-2"></div>
<div class="box-bar-3"></div>
<div class="box-bar-4"></div>
<div class="box-bar-5"></div>
<div class="box-bar-6"></div>
<div class="box-bar-7"></div>
<div class="box-bar-8"></div>
<div class="box-bar-9"></div>
<div class="box-bar-10"></div>
</div>
</body>
</html>代碼的原理其實很簡單，就是用一個大盒子把里面的子盒子包起來，這個大盒子的作用就是那個閃爍效果以及默認背景顏色，其他子標簽的作用就是把不是內容的用白色蓋住默認背景。
恭喜你看完了，能看下來也是不錯的。
文章列表
| 不含病毒。www.avast.com |
文章標籤
全站熱搜
