Javascript 如何在像 facebook 一样加载时创建占位符
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/35151887/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to create placeholder while loading like facebook
提问by sibaspage
How to create background loading lines like facebook did while loading the content using angular js.
如何在使用 angular js 加载内容时创建像 facebook 一样的背景加载线。
回答by Victor Igor
You can make it with some css background linear-gradient:
您可以使用一些 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>And paint with divs in white for a effect:
并用白色的 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>If you need to do multiple, this can be laborious, so this library automates: placeload.js
如果你需要做多个，这可能很费力，所以这个库自动化了：placeload.js
回答by Mira Weller
You could have a look at this blog post which describes in detail how the placeholders on Facebook work:
您可以查看这篇博客文章，其中详细描述了 Facebook 上的占位符是如何工作的：
http://cloudcannon.com/deconstructions/2014/11/15/facebook-content-placeholder-deconstruction.html
http://cloudcannon.com/deconstructions/2014/11/15/facebook-content-placeholder-deconstruction.html
Essentially, you put in some static html styled with css to look similar to the content that is coming.
本质上，您放入一些带有 css 样式的静态 html，使其看起来与即将出现的内容相似。
<div class="placeholder">
<!-- some boxes in light grey to look like content -->
</div>
When you are finished loading, you remove the placeholder:
加载完成后，删除占位符：
$(".placeholder").remove();
回答by zalog
If you guys ever need a npm package for placeholder loading animation, I made this: https://github.com/zalog/placeholder-loading
如果你们需要一个用于占位符加载动画的 npm 包，我做了这个：https: //github.com/zalog/placeholder-loading
It's a library that can be configured as you need.
It's responsive, fast, simple, gpu optimized animation and css only.
这是一个可以根据需要进行配置的库。
它是响应式的、快速的、简单的、gpu 优化的动画和 css。
Demo:
演示：
<!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>