查看: 668|回复: 0

[DIV/CSS] Skeleton Screen加载占位图(内容出现前显示灰色占位图)的分析与实现

发表于 2017-10-27 08:00:02
太阳http代理AD

今天有几个好友问了这个叫加载占位图的实现方法,我还在此问题下做了个回答.
由于国内对这个的名词是各有各的叫法,所以这里直接用加载占位图来解释.
相信很多人都看到过图中这样的加载方式:

这个图是一个国内知名站点的,相比以往的loading圈圈,看起来是不是美观了许多.
据说这个Idea是一个谷歌工程师在2013年时想到的.我不喜欢去讨论概念之类.直接用知名站点来通俗易懂的解释:

以往:发起ajax-loading.gif/svg-ajax结果.
现在:发起ajax-具有css3动感(比如闪烁)的灰色布局div-ajax结果

不用ajax也没关系,css3的':before'也是没问题的,总之目的是要代替loading动图.

这里有一段下文这个图获得ajax响应前的结果,它在获得回调前用了这段代码:

  1. <div>
  2. <div class="split-line">
  3. </div>
  4. <div class="top-title">
  5. <span>热门专题</span>
  6. </div>
  7. <div class="recommend-collection">
  8. <span class="collection-loading" style="width: 72px;"></span>
  9. <span class="collection-loading" style="width: 66px;"></span>
  10. <span class="collection-loading" style="width: 63px;"></span>
  11. <span class="collection-loading" style="width: 53px;"></span>
  12. <span class="collection-loading" style="width: 61px;"></span>
  13. <span class="collection-loading" style="width: 48px;"></span>
  14. <span class="collection-loading" style="width: 71px;"></span>
  15. <span class="collection-loading" style="width: 59px;"></span>
  16. </div>
  17. </div>
复制代码


那么,这么聪明的你应该学会了如何实现它了吧?
看起来很炫的东西,往往都是很简单的.



太阳http代理AD
回复

使用道具 举报