骨架屏是通過css實現的加載過渡效果，核心在于使用html結構與css動畫模擬內容輪廓并提升用戶體驗。具體步驟包括：1. 使用html搭建無內容的頁面結構；2. 通過css設置淺灰色背景與動畫實現動態閃爍效果；3. 利用border-radius或clip-path控制骨架屏形狀；4. 數據加載完成后通過JavaScript移除骨架屏；5. 優化性能時避免復雜形狀、使用css動畫并減少重繪重排；6. 可根據網絡環境動態調整骨架屏復雜程度；7. 骨架屏區別于loading動畫，其優勢在于提供內容預期而非單純提示加載。
骨架屏，說白了，就是在數據加載前，先用一些簡單的形狀“占個坑”，給用戶一個“正在加載”的心理預期，避免長時間白屏帶來的焦慮。CSS 就能搞定這件事，而且效果還不錯。
CSS實現骨架屏，其實就是利用CSS的背景和動畫效果。
解決方案
-
基礎結構： 先用HTML搭建一個簡單的頁面結構，比如文章標題、段落等。這些結構不需要真實的內容，只需要確定它們的位置和大小。
立即學習“前端免費學習筆記（深入）”；
-
CSS樣式： 關鍵在于CSS。給這些結構添加背景色，通常是淺灰色，模擬內容未加載時的狀態。
-
動畫效果： 通過CSS動畫，讓這些淺灰色的背景色產生一種閃爍或漸變的效果，模擬數據加載的動態過程。
一個簡單的例子：
<div class="skeleton-wrapper"> <div class="skeleton-title"></div> <div class="skeleton-paragraph"></div> <div class="skeleton-image"></div> </div>
.skeleton-wrapper { width: 80%; margin: 20px auto; } .skeleton-title { width: 60%; height: 30px; background-color: #eee; margin-bottom: 10px; border-radius: 5px; animation: skeleton-loading 1.5s linear infinite; } .skeleton-paragraph { width: 90%; height: 15px; background-color: #eee; margin-bottom: 5px; border-radius: 3px; animation: skeleton-loading 1.5s linear infinite; } .skeleton-image { width: 100%; height: 200px; background-color: #eee; border-radius: 10px; animation: skeleton-loading 1.5s linear infinite; } @keyframes skeleton-loading { 0% { background-color: #eee; } 50% { background-color: #ddd; } 100% { background-color: #eee; } }
這段代碼創建了一個簡單的骨架屏，包含一個標題、一段文字和一個圖片。關鍵是skeleton-loading這個動畫，它讓背景色在淺灰色之間循環變化，產生閃爍的效果。
如何更精細地控制骨架屏的形狀？
骨架屏不一定要是矩形。你可以使用border-radius來創建圓角，甚至使用clip-path來創建更復雜的形狀。例如，想要一個圓形頭像的骨架屏，可以這樣：
.skeleton-avatar { width: 50px; height: 50px; border-radius: 50%; /* 圓形的關鍵 */ background-color: #eee; animation: skeleton-loading 1.5s linear infinite; }
clip-path則更強大，可以創建任意形狀。但要注意兼容性，一些老版本的瀏覽器可能不支持。
如何在數據加載完成后移除骨架屏？
這需要在JavaScript的配合下完成。當數據加載完成后，移除骨架屏的類名，或者直接移除骨架屏的html元素。一個簡單的例子：
// 假設 dataLoaded 是一個布爾值，表示數據是否加載完成 if (dataLoaded) { const skeletonWrapper = document.querySelector('.skeleton-wrapper'); skeletonWrapper.classList.add('hidden'); // 或者直接 skeletonWrapper.remove(); }
.skeleton-wrapper.hidden { display: none; }
當dataLoaded為true時，給.skeleton-wrapper添加一個hidden類，將其隱藏。當然，更徹底的做法是直接移除骨架屏的HTML元素。
如何優化骨架屏的性能？
骨架屏本身不應該成為性能瓶頸。
- 避免過度復雜的形狀： 復雜的clip-path或過多的元素會增加渲染負擔。
- 使用CSS動畫： CSS動畫通常比JavaScript動畫更高效。
- 減少重繪和重排： 盡量避免觸發重繪和重排的操作。
如何針對不同的網絡環境使用不同的骨架屏？
可以根據網絡速度，顯示不同復雜程度的骨架屏。比如，在弱網環境下，顯示更簡單的骨架屏，減少加載時間。這需要在JavaScript中檢測網絡速度，并根據結果動態調整骨架屏的樣式。這有點復雜，但如果你的應用對用戶體驗要求很高，可以考慮這樣做。
骨架屏和loading動畫有什么區別？
骨架屏提供的是內容的大致輪廓，而loading動畫通常是一個獨立的、居中的動畫元素，表示正在加載。骨架屏更注重用戶體驗，讓用戶對即將加載的內容有一個大致的預期，而loading動畫則更簡單直接。兩者可以同時使用，但通常情況下，骨架屏的效果更好。
