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

Question

Facebook 有一个“加载”屏幕，在等待所有内容下载时会以特定方式显示动画。颜色从灰色到浅灰色交替变化

我查看了所有下载的图片，但找不到，所以我认为这是 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 选择了唯一的标记方式。

要识别这些元素，您可以在加载元素时按退出键挂起浏览器，留下一个未完成的页面，然后您可以使用您最喜欢的开发工具环顾四周并检查 - 在 Chrome 上，单击放大镜并然后单击您要检查的元素，使开发工具直接跳转到您刚刚选择的元素。

但是请记住，随着 Angular 等 js 客户端框架的出现，这个技巧可能不起作用，（特别是如果 javascript 已经加载并且您想在路由更改之间停止执行）在这种情况下，您必须使用内置的调试器/断点停止浏览器。