我们怎样才能同时

Question

页

这从LinkedIn，Facebook的，不和谐等图像加载元件使用该预加载效果使这个预加载，我发现这个：http://cloudcannon.com/deconstructions/2014/11/15/facebook-content-placeholder-deconstruction.html

但没有更多的一篇关于这个我不能“找不到

Answer 1

加载占位符，并从服务器获取数据，从服务器上获取数据后隐藏的占位符。

// using timeout to illustrate a delay 
 
    setTimeout(function() { 
 
     $('.timeline-wrapper').hide(); 
 
     $('.show-data').show(); 
 
    }, 3000); 
 

 
// get your data from server here 
 
// $.post('getdata.php', function (data) { 
 
//  // process your data here 
 
//  hide placeholder 
 
//  $('.timeline-wrapper').hide(); 
 
// })

.timeline-item { 
 
      background: #fff; 
 
      border: 1px solid; 
 
      border-color: #e5e6e9 #dfe0e4 #d0d1d5; 
 
      border-radius: 3px; 
 
      padding: 12px; 
 

 
      margin: 0 auto; 
 
      max-width: 472px; 
 
      min-height: 200px; 
 
     } 
 

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

 
     .animated-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: 800px 104px; 
 
      height: 96px; 
 
      position: relative; 
 
     }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="timeline-wrapper"> 
 
    <div class="timeline-item"> 
 
     <div class="animated-background"> 
 
      <div class="background-masker header-top"></div> 
 
      <div class="background-masker header-left"></div> 
 
      <div class="background-masker header-right"></div> 
 
      <div class="background-masker header-bottom"></div> 
 
      <div class="background-masker subheader-left"></div> 
 
      <div class="background-masker subheader-right"></div> 
 
      <div class="background-masker subheader-bottom"></div> 
 
      <div class="background-masker content-top"></div> 
 
      <div class="background-masker content-first-end"></div> 
 
      <div class="background-masker content-second-line"></div> 
 
      <div class="background-masker content-second-end"></div> 
 
      <div class="background-masker content-third-line"></div> 
 
      <div class="background-masker content-third-end"></div> 
 
     </div> 
 
    </div> 
 
</div> 
 
<div class="show-data" style="display: none"> 
 
    <p>data from server</p> 
 
</div>