前端內容佔位技術分享

時間 2019-11-12

標籤前端內容佔位技術分享简体版

原文原文鏈接

所謂內容佔位技術，意思是說在內容比較多，數據量大的狀況下，能夠事先將一些標籤替代它們的位置，等到加載完畢的時候再將其隱藏。注意這和之前的圖片懶加載不是一個意思，兩個不起衝突，圖片懶加載的原理就是事先用一個較小的loading圖片，等用戶到達這個位置的高度時再去獲取相應的數據。內容佔位技術就是模擬它可能會顯示出來的樣子。html

好比下面這個頁面，很差意思打了馬賽克
dom

再尚未加載內容出來時，咱們能夠這樣。
code

由於是gif的圖片，效果並非特別好，直接把上面代碼拷貝到你的文件裏面打開。這裏只作了一部分（量寬高太麻煩了）htm

其中代碼blog

<!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>

代碼的原理其實很簡單，就是用一個大盒子把裏面的子盒子包起來，這個大盒子的做用就是那個閃爍效果以及默認背景顏色，其餘子標籤的做用就是把不是內容的用白色蓋住默認背景。圖片

恭喜你看完了，能看下來也是不錯的。animation