Facebook如何生成动画占位符新闻项目？

Question

Facebook有一个＆＃34; loading＆＃34;在等待下载所有内容时以特定方式激活的屏幕。颜色从灰色变为浅灰色

我查看了所有下载的图片，但无法找到它，所以我认为这是一个CSS技巧。

有谁能告诉我这是如何完成的（更好的是，你用什么过程来识别这个加载屏幕的位置？）

Answer 1

这很容易实现，你刚才看到的只不过是一系列白色div元素，它们掩盖了动画背景，这种方式也是如此（请原谅我糟糕的绘画）：

如果你知道模板涂鸦是如何工作的，那么应该很容易理解这背后的概念。

您无法识别图像，因为没有实际的动画图像，只是带有css动画的灰色背景，这是隐藏遮罩元素的实际第一层：

正如你所看到的，它只不过是一个带有CSS3动画渐变的div，下面是他们正在使用的CSS规则。

._2iwq {
  -webkit-animation-duration: 1s;
  -webkit-animation-fill-mode: forwards;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-name: placeHolderShimmer;
  -webkit-animation-timing-function: linear;
  background: #f6f7f8;
  background-image: -webkit-gradient(linear, left center, right center, from(#f6f7f8), color-stop(.2, #edeef1), color-stop(.4, #f6f7f8), to(#f6f7f8));
  background-image: -webkit-linear-gradient(left, #f6f7f8 0%, #edeef1 20%, #f6f7f8 40%, #f6f7f8 100%);
  background-repeat: no-repeat;
  background-size: 800px 104px;
  height: 104px;
  position: relative;
}

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

根据第二层，他们在背景容器中使用了一堆div元素并且绝对定位，只是屏蔽了用户不应该看到的部分。

所以留给你的只是在各个div元素之间留下的“洞”或“空格”，这让你觉得下面的动画背景是坐在顶部的单个元素。

你可以通过在元素上放置一个png掩码来更容易地完成同样的操作，但需要时间加载，除非你当然使用内联图像（但是，嘿，没有人喜欢他们的标记中不可读的东西而且难以改变）所以我想想为什么Facebook选择采用唯一的加价方式。

要识别这些元素，您可以通过在元素加载时按下escape来挂起浏览器，然后留下一个未完成的页面，然后您可以环顾四周并使用您喜欢的devtools进行检查 - 在Chrome上，单击放大镜和然后单击要检查的元素，使devtool直接跳转到刚刚选择的元素。

但请记住，随着js客户端框架（例如Angular）的出现，这个技巧可能无效，（特别是如果javascript已经加载并且你想要在路由更改之间暂停执行），那么你必须使用内置调试器/断点暂停浏览器。