text - 在新的 YouTube 设计中看到的延迟加载样式文本？

Question

似乎无法找到这是什么图书馆，或任何关于它的东西，但我最近越来越多地看到它。通过延迟加载查询动态文本(带有灰色 bg 占位符)。例如:cloudflare.com、youtube.com、upwork.com。


有人知道这是什么吗？谢谢。

Answer 1

不需要库，实际上它非常简单，只需 HTML 和 CSS 动画即可完成，请参见下面的示例。

/*
The javascript here is only for demonstration purpose in order to switch 
between 'pulse' and 'wave' animation effect, it is not actually required.
*/

jQuery(document).ready(function ($){
  $('#pulse').click(function(){
      $('.placeholder').removeClass('wave').addClass('pulse');
  })
  
  $('#wave').click(function(){
      $('.placeholder').removeClass('pulse').addClass('wave');
  })

  $('#stop').click(function(){
      $('.placeholder').removeClass('pulse wave');
  })
});

.placeholder{
  margin:15px;
  padding:10px;
  height: 115px;
  border: 1px solid lightgrey;
  border-radius: 5px;
}

.placeholder div{background:#E8E8E8;}

.placeholder .square{
  float:left;
  width: 90px;
  height:56px;
  margin:0 0 10px;
}

.placeholder .line{height:12px;margin:0 0 10px 105px;}
.placeholder .line:nth-child(2){width: 120px;}
.placeholder .line:nth-child(3){width: 170px;}
.placeholder .line:nth-child(4){width: 150px;}

.placeholder .circle{
  float:left;
  width: 15px;
  height:15px;
  margin:0 15px 10px 0;
  border-radius:15px;
}

/* 
  --------------
  Pulse effect animation 
  Activated by adding a '.pulse' class to the placeholder
  --------------
*/

.placeholder.pulse div{
  animation: pulse 1s infinite ease-in-out;
  -webkit-animation:pulse 1s infinite ease-in-out;
}

@keyframes pulse
{
  0%{
    background-color: rgba(165,165,165,.1);
  }
  50%{
    background-color: rgba(165,165,165,.3);
  }
  100%{
    background-color: rgba(165,165,165,.1);
  }
}

@-webkit-keyframes pulse
{
  0%{
    background-color: rgba(165,165,165,.1);
  }
  50%{
    background-color: rgba(165,165,165,.3);
  }
  100%{
    background-color: rgba(165,165,165,.1);
  }
}

/* 
  --------------
  Wave effect animation 
  Activated by adding a '.wave' class to the placeholder
  --------------
*/

.placeholder.wave div{
    animation: wave 1s infinite linear forwards;
    -webkit-animation:wave 1s infinite linear forwards;
    background: #f6f7f8;
    background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
    background-size: 800px 104px;
}

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

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="pulse">Pulse Effect</button>
<button id="wave">Wave Effect</button>
<button id="stop">Stop Animation</button>

<div class="placeholder pulse">

  <div class="square"></div>

  <div class="line"></div>
  <div class="line"></div>
  <div class="line"></div>

  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>

</div>

上面的代码灵感来自这些文章:

How the Facebook content placeholder works

Loading Placeholder Effect using HTML and CSS