骨架屏通過html結(jié)構(gòu)模擬頁面元素、css添加動畫效果、JavaScript控制加載流程來提升用戶體驗。1. html使用占位元素搭建頁面結(jié)構(gòu)，如.skeleton-rect、.skeleton-image等；2. css設(shè)置背景漸變和動畫實現(xiàn)動態(tài)加載效果；3. javascript監(jiān)聽加載完成事件并替換為真實內(nèi)容。此外還可借助框架組件、css預(yù)處理器、服務(wù)端渲染等方式實現(xiàn)。優(yōu)化方面應(yīng)注重模擬真實布局、動畫增強(qiáng)體驗、減少骨架屏加載時間、根據(jù)網(wǎng)絡(luò)狀況調(diào)整顯示時長，并確保無障礙性。適用于數(shù)據(jù)加載慢、頁面復(fù)雜、首次訪問、網(wǎng)絡(luò)不穩(wěn)定及移動端場景，但不建議用于加載速度快的簡單頁面。
HTML實現(xiàn)骨架屏，本質(zhì)上就是在數(shù)據(jù)加載完成前，先用一些占位元素模擬頁面的大致結(jié)構(gòu)，給用戶一個“頁面正在加載中”的視覺反饋，避免長時間白屏帶來的焦慮感。
頁面加載骨架屏效果可以通過HTML、CSS和少量JavaScript來實現(xiàn)，核心思路是用靜態(tài)的HTML結(jié)構(gòu)和CSS樣式模擬頁面的主要內(nèi)容，然后在數(shù)據(jù)加載完成后，用真實數(shù)據(jù)替換這些占位元素。
解決方案：
立即學(xué)習(xí)“前端免費學(xué)習(xí)筆記（深入）”；
-
HTML結(jié)構(gòu)： 創(chuàng)建HTML骨架，用
等元素模擬頁面結(jié)構(gòu)，設(shè)置好基本的寬高和位置。可以使用一些通用的類名，比如.skeleton-rect、.skeleton-circle等，方便統(tǒng)一管理樣式。<div class="container"> <div class="skeleton-image"></div> <div class="skeleton-title"></div> <div class="skeleton-text"></div> <div class="skeleton-button"></div> </div>
CSS樣式： 為骨架元素添加CSS樣式，設(shè)置背景顏色、圓角、動畫等，使其看起來更像一個加載中的頁面。可以使用漸變動畫，模擬數(shù)據(jù)加載的動態(tài)效果。
.skeleton-rect { width: 100%; height: 20px; background: linear-gradient(90deg, #eee 25%, #f5f5f5 50%, #eee 75%); background-size: 200% 100%; animation: skeleton-loading 1.5s linear infinite; border-radius: 4px; margin-bottom: 10px; } .skeleton-image { width: 100px; height: 100px; border-radius: 50%; } @keyframes skeleton-loading { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }JavaScript控制： 使用JavaScript在頁面加載時顯示骨架屏，并在數(shù)據(jù)加載完成后，移除骨架屏，顯示真實數(shù)據(jù)。
document.addEventListener('DOMContentLoaded', () => { // 模擬數(shù)據(jù)加載 setTimeout(() => { const container = document.querySelector('.container'); container.innerHTML = ` @@##@@ <h2>真實標(biāo)題</h2> <p>真實內(nèi)容...</p> <button>按鈕</button> `; }, 2000); // 2秒后加載數(shù)據(jù) });骨架屏的實現(xiàn)并不復(fù)雜，但它可以顯著提升用戶體驗，尤其是在網(wǎng)絡(luò)狀況不佳的情況下。
骨架屏有哪些常見的實現(xiàn)方式？
除了上面提到的HTML、CSS和JavaScript的組合，還有一些其他的實現(xiàn)方式：
- 使用現(xiàn)成的庫或框架： 很多前端框架，如React、vue等，都有現(xiàn)成的骨架屏組件可以使用，可以大大簡化開發(fā)過程。例如，React可以使用react-skeleton-loading等庫。
- CSS預(yù)處理器： 使用sass或less等CSS預(yù)處理器，可以更方便地管理骨架屏的樣式，例如，可以使用循環(huán)生成多個骨架元素。
- 服務(wù)端渲染（SSR）： 在服務(wù)端渲染時，可以先生成骨架屏的HTML，然后將其發(fā)送到客戶端，這樣可以更快地顯示頁面內(nèi)容。
- 漸進(jìn)式加載： 可以結(jié)合漸進(jìn)式加載，先加載頁面的骨架屏，然后逐步加載其他內(nèi)容，例如圖片、視頻等。
選擇哪種方式取決于具體的項目需求和技術(shù)棧。如果項目比較簡單，可以直接使用HTML、CSS和JavaScript實現(xiàn)；如果項目比較復(fù)雜，可以考慮使用現(xiàn)成的庫或框架。
如何優(yōu)化骨架屏的用戶體驗？
骨架屏不僅僅是簡單的占位符，它還可以通過一些優(yōu)化來提升用戶體驗：
- 模擬真實內(nèi)容： 骨架屏應(yīng)該盡可能地模擬真實內(nèi)容的結(jié)構(gòu)和樣式，讓用戶對頁面內(nèi)容有一個大致的了解。
- 使用動畫效果： 添加一些動畫效果，例如漸變、閃爍等，可以增強(qiáng)骨架屏的視覺效果，讓用戶感覺頁面正在加載中。
- 考慮加載速度： 骨架屏本身也需要快速加載，避免出現(xiàn)長時間的白屏。可以對骨架屏的HTML和CSS進(jìn)行優(yōu)化，減少文件大小。
- 根據(jù)網(wǎng)絡(luò)狀況調(diào)整： 可以根據(jù)用戶的網(wǎng)絡(luò)狀況，動態(tài)調(diào)整骨架屏的顯示時間。例如，在網(wǎng)絡(luò)狀況較差的情況下，可以顯示更長時間的骨架屏。
- 無障礙性： 確保骨架屏具有良好的無障礙性，方便殘障人士使用。例如，可以添加aria-label屬性，描述骨架屏的作用。
骨架屏的目的是為了提升用戶體驗，因此在實現(xiàn)過程中，需要不斷地進(jìn)行測試和優(yōu)化，找到最適合自己的方案。
骨架屏在哪些場景下比較適用？
骨架屏并非適用于所有場景，它在以下場景下通常能發(fā)揮更大的作用：
- 數(shù)據(jù)加載時間較長： 當(dāng)頁面需要加載大量數(shù)據(jù)，或者數(shù)據(jù)來自遠(yuǎn)程服務(wù)器時，骨架屏可以有效地緩解用戶的等待焦慮。
- 頁面結(jié)構(gòu)復(fù)雜： 對于結(jié)構(gòu)復(fù)雜的頁面，骨架屏可以幫助用戶快速了解頁面的整體布局，提高用戶體驗。
- 首次加載： 在首次加載頁面時，由于瀏覽器緩存為空，加載速度通常較慢，此時使用骨架屏可以提供更好的用戶體驗。
- 網(wǎng)絡(luò)狀況不穩(wěn)定： 在網(wǎng)絡(luò)狀況不穩(wěn)定的情況下，骨架屏可以作為一種優(yōu)雅的降級方案，避免頁面出現(xiàn)長時間的白屏。
- 移動端應(yīng)用： 移動端應(yīng)用的加載速度通常比PC端慢，因此骨架屏在移動端應(yīng)用中更為重要。
當(dāng)然，在一些簡單的頁面，或者數(shù)據(jù)加載速度很快的情況下，可能并不需要使用骨架屏。是否使用骨架屏，需要根據(jù)具體的場景進(jìn)行評估。
.png)
