Skeleton Screen加載佔位圖(內容出現前顯示灰色佔位圖)的分析與實現

今天有幾個好友問了這個叫加載佔位圖的實現方法,我還在此問題下作了個回答.
因爲國內對這個的名詞是各有各的叫法,因此這裏直接用加載佔位圖來解釋.
相信不少人都看到過圖中這樣的加載方式:

這個圖是一個國內知名站點的,相比以往的loading圈圈,看起來是否是美觀了許多.
聽說這個Idea是一個谷歌工程師在2013年時想到的.我不喜歡去討論概念之類.直接用知名站點來通俗易懂的解釋:

以往:發起ajax-loading.gif/svg-ajax結果.
如今:發起ajax-具備css3動感(好比閃爍)的灰色佈局div-ajax結果

不用ajax也不要緊,css3的':before'也是沒問題的,總之目的是要代替loading動圖.

這裏有一段下文這個圖得到ajax響應前的結果,它在得到回調前用了這段代碼:

<div>
    <div class="split-line">
    </div>
    <div class="top-title">
        <span>熱門專題</span>
    </div>
    <div class="recommend-collection">
<span class="collection-loading" style="width: 72px;"></span>
<span class="collection-loading" style="width: 66px;"></span>
<span class="collection-loading" style="width: 63px;"></span>
<span class="collection-loading" style="width: 53px;"></span>
<span class="collection-loading" style="width: 61px;"></span>
<span class="collection-loading" style="width: 48px;"></span>
<span class="collection-loading" style="width: 71px;"></span>
<span class="collection-loading" style="width: 59px;"></span>
    </div>
</div>

那麼,這麼聰明的你應該學會了如何實現它了吧?
看起來很炫的東西,每每都是很簡單的.