Facebook 和媒体内容占位符样式

Question

最近我注意到 Facebook 和 Medium 正在使用延迟加载样式。但是，jQuery 中的 none 或我发现的任何其他库尚未实现相同的样式。

有谁知道如何做到这一点或任何熟悉的 jQuery 库可以做到这一点？

这是我所指的屏幕截图：

Answer 1

我刚刚在 Codepen 找到了一个：

 @-webkit-keyframes placeHolderShimmer {
   0% {
     background-position: -468px 0
   }
   100% {
     background-position: 468px 0
   }
 }
 
 @keyframes placeHolderShimmer {
   0% {
     background-position: -468px 0
   }
   100% {
     background-position: 468px 0
   }
 }
 
 .timeline-wrapper {
   background-color: #e9eaed;
   color: #141823;
   padding: 20px;
   border: 1px solid #ccc;
 }
 
 .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;
 }
 
 .animated-background {
   -webkit-animation-duration: 1s;
   animation-duration: 1s;
   -webkit-animation-fill-mode: forwards;
   animation-fill-mode: forwards;
   -webkit-animation-iteration-count: infinite;
   animation-iteration-count: infinite;
   -webkit-animation-name: placeHolderShimmer;
   animation-name: placeHolderShimmer;
   -webkit-animation-timing-function: linear;
   animation-timing-function: linear;
   background: #f6f7f8;
   background: #eeeeee;
   background: -webkit-gradient(linear, left top, right top, color-stop(8%, #eeeeee), color-stop(18%, #dddddd), color-stop(33%, #eeeeee));
   background: -webkit-linear-gradient(left, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
   background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
   -webkit-background-size: 800px 104px;
   background-size: 800px 104px;
   height: 96px;
   position: relative;
 }
 
 .background-masker {
   background: #fff;
   position: absolute;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
 }
 
 .outlined .background-masker {
   border: 1px solid #ddd;
 }
 
 .outlined:hover .background-masker {
   border: none;
 }
 
 .outlined:hover .background-masker:hover {
   border: 1px solid #ccc;
   z-index: 1;
 }
 
 .background-masker.header-top,
 .background-masker.header-bottom,
 .background-masker.subheader-bottom {
   top: 0;
   left: 40px;
   right: 0;
   height: 10px;
 }
 
 .background-masker.header-left,
 .background-masker.subheader-left,
 .background-masker.header-right,
 .background-masker.subheader-right {
   top: 10px;
   left: 40px;
   height: 8px;
   width: 10px;
 }
 
 .background-masker.header-bottom {
   top: 18px;
   height: 6px;
 }
 
 .background-masker.subheader-left,
 .background-masker.subheader-right {
   top: 24px;
   height: 6px;
 }
 
 .background-masker.header-right,
 .background-masker.subheader-right {
   width: auto;
   left: 300px;
   right: 0;
 }
 
 .background-masker.subheader-right {
   left: 230px;
 }
 
 .background-masker.subheader-bottom {
   top: 30px;
   height: 10px;
 }
 
 .background-masker.content-top,
 .background-masker.content-second-line,
 .background-masker.content-third-line,
 .background-masker.content-second-end,
 .background-masker.content-third-end,
 .background-masker.content-first-end {
   top: 40px;
   left: 0;
   right: 0;
   height: 6px;
 }
 
 .background-masker.content-top {
   height: 20px;
 }
 
 .background-masker.content-first-end,
 .background-masker.content-second-end,
 .background-masker.content-third-end {
   width: auto;
   left: 380px;
   right: 0;
   top: 60px;
   height: 8px;
 }
 
 .background-masker.content-second-line {
   top: 68px;
 }
 
 .background-masker.content-second-end {
   left: 420px;
   top: 74px;
 }
 
 .background-masker.content-third-line {
   top: 82px;
 }
 
 .background-masker.content-third-end {
   left: 300px;
   top: 88px;
 }

<div class="timeline-wrapper">
  <div class="timeline-item">
    <div class="animated-background facebook">
      <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>

Facebook 和媒体内容占位符样式

Facebook and Medium Content Placeholder Style

javascript

jquery

user-interface

facebook

medium.com