javascript - 如何在像 facebook 一样加载时创建占位符

Question

如何像 facebook 在使用 angular js 加载内容时创建后台加载线。

Answer 1

你可以用一些 css 背景线性渐变来制作它:

@keyframes placeHolderShimmer{
    0%{
        background-position: -468px 0
    }
    100%{
        background-position: 468px 0
    }
}
.linear-background {
    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: 1000px 104px;
    height: 338px;
    position: relative;
    overflow: hidden;
}

<div class="linear-background">
  
  
</div>

然后用白色 div 绘制效果:

@keyframes placeHolderShimmer{
    0%{
        background-position: -468px 0
    }
    100%{
        background-position: 468px 0
    }
}

.linear-background {
    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: 1000px 104px;
    height: 200px;
    position: relative;
    overflow: hidden;
}
.inter-draw{
  background: #FFF;
  width: 100%;
  height: 100px;
  position: absolute;
  top: 100px;
}
.inter-right--top{
  background: #FFF;
  width: 100%;
  height: 20px;
  position: absolute;
  top: 20px;
  left: 100px;
}
.inter-right--bottom{
  background: #FFF;
  width: 100%;
  height: 50px;
  position: absolute;
  top: 60px;
  left: 100px;
}
.inter-crop{
  background: #FFF;
  width: 20px;
  height: 100%;
  position: absolute;
  top: 0;
  left: 100px;
}

<div class="linear-background">
  <div class="inter-draw"></div>
  <div class="inter-crop"></div>
  <div class="inter-right--top"></div>
  <div class="inter-right--bottom"></div>
</div>

如果你需要做多个，这可能很费力，所以这个库自动化:placeload.js