如何在facebook上加載時創建佔位符

Question

如何使用angular js加載內容時如何創建背景加載線。 enter image description here

Answer 1

你可以看看它詳細描述了在Facebook工作的佔位符怎麼這個博客帖子：

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

從本質上講，你把用CSS樣式一些靜態的html看起來類似內容即將到來。

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

當你完成加載，刪除佔位符：

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

Answer 2

您可以用CSS背景線性購買gradiente使：

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

和油漆與白色的白色效果：

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

如果你需要做的多，這可能是費力的，所以這個圖書館自動化：placeload.js