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选择了唯一的加价方式.

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

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