一、經(jīng)常使用簡(jiǎn)書(shū)和支付寶憔儿，打開(kāi)應(yīng)用加載的時(shí)候偶爾會(huì)看到這個(gè)頁(yè)面
IMG_0015.PNG
等到獲取到數(shù)據(jù)之后忆植，就變成了這個(gè)樣子
IMG_0016(1).PNG
作為一名客戶端開(kāi)發(fā)人員，總感覺(jué)這個(gè)操作很騷很6
問(wèn)題：到底是怎么實(shí)現(xiàn)的呢谒臼？
工具：
- 一臺(tái)越獄手機(jī)
- Reveal
- 另一個(gè)提供熱點(diǎn)的可以設(shè)置成2G/3G網(wǎng)絡(luò)的手機(jī)
- 一杯白開(kāi)水
過(guò)程
- 首先讓越獄手機(jī)連接開(kāi)放熱點(diǎn)的手機(jī)朝刊，然后將熱點(diǎn)調(diào)成2G，為了就是讓加載過(guò)程變慢蜈缤，可以看到加載過(guò)程
-
在越獄手機(jī)上啟動(dòng)應(yīng)用拾氓，然后找準(zhǔn)時(shí)機(jī)，通過(guò)Reveal查看當(dāng)時(shí)的頁(yè)面布局底哥，當(dāng)你看到這個(gè)圖的時(shí)候我想你就已經(jīng)明白原理了
企業(yè)微信截圖_5b6a663c-4f10-4c34-a58a-843f12975c61.png -
然后把網(wǎng)絡(luò)切換回3G咙鞍，因?yàn)榫W(wǎng)絡(luò)環(huán)境太差了，直接請(qǐng)求失敗了趾徽，再次刷新數(shù)據(jù)续滋，看到了獲取到數(shù)據(jù)的頁(yè)面，如圖
80161524819045_.pic_hd.jpg - 對(duì)比一下上面兩張圖孵奶，可以清晰的看到疲酌，在請(qǐng)求時(shí)有一個(gè)占位圖，在請(qǐng)求到數(shù)據(jù)之后了袁，占位圖被移除朗恳，直接展示真實(shí)數(shù)據(jù)，整個(gè)過(guò)程給用戶一種持續(xù)加載的感覺(jué)早像，提升用戶體驗(yàn)
三僻肖、你以為這樣就完了，不卢鹦，還有更騷的，下面我們來(lái)看下糗事百科
分析過(guò)程和準(zhǔn)備工作和上面是一樣的
工具同上，只是加了個(gè)點(diǎn)水
80231524820331_.pic_hd.jpg
80241524820335_.pic_hd.jpg
80251524820339_.pic_hd.jpg
80261524820342_.pic_hd.jpg
分析：糗事百科在加載的時(shí)候冀自，占位圖會(huì)有一種不斷刷新的感覺(jué)揉稚，建議將網(wǎng)絡(luò)環(huán)境切換到較差的環(huán)境嘗試
- 圖有兩張，第一張是文本和頭像部分是透明的熬粗，放在上面搀玖；另一張是負(fù)責(zé)在下面不斷偏移的底層圖片
- 加載時(shí)，下面的圖不斷修改frame驻呐，相當(dāng)于上面的不動(dòng)灌诅，下面的圖不斷移動(dòng)，造成上圖透明的部分含末，被遮擋的部分猜拾，不斷移動(dòng)的效果
傳送門
OC：
Somo
OCSkeleton
Swift:
SkeletonView
