Question

如何在使用角度js加载内容时创建像facebook这样的后台加载行。

screenshot

Answer 1

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

＆＃13;

@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;
}

＆＃13;

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

＆＃13;

并使用白色div来绘制效果：

＆＃13;

@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;
}

＆＃13;

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

＆＃13;

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

Answer 2

您可以查看此博客文章，其中详细介绍了Facebook上的占位符如何工作：

http://cloudcannon.com/deconstructions/2014/11/15/facebook-content-placeholder-deconstruction.html

基本上，你输入一些静态html样式，用css看起来类似于即将发布的内容。

<div class="placeholder">
  <!-- some boxes in light grey to look like content -->
</div>

加载完成后，删除占位符：

$(".placeholder").remove();

Answer 3

如果你们需要一个npm包来加载占位符动画，我会这样做：https://github.com/zalog/placeholder-loading

这是一个可以根据需要配置的库。
这是响应式，快速，简单，经过gpu优化的动画，并且仅使用CSS。

演示：

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Demo placeholder-loading</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://unpkg.com/placeholder-loading/dist/css/placeholder-loading.min.css" rel="stylesheet">
  </head>
  <body>

    <div class="ph-item">

      <div class="ph-col-2">
        <div class="ph-avatar"></div>
      </div>

      <div>
        <div class="ph-row">
          <div class="ph-col-4"></div>
          <div class="ph-col-8 empty"></div>
          <div class="ph-col-6"></div>
          <div class="ph-col-6 empty"></div>
          <div class="ph-col-2"></div>
          <div class="ph-col-10 empty"></div>
        </div>
      </div>

      <div class="ph-col-12">
        <div class="ph-picture"></div>
        <div class="ph-row">
          <div class="ph-col-10 big"></div>
          <div class="ph-col-2 empty big"></div>
          <div class="ph-col-4"></div>
          <div class="ph-col-8 empty"></div>
          <div class="ph-col-6"></div>
          <div class="ph-col-6 empty"></div>
          <div class="ph-col-12"></div>
        </div>
      </div>

    </div>

  </body>
</html>

如何在加载像facebook时创建占位符

3 个答案: