深入淺出骨架屏實現原理

一、什麼是骨架屏

骨架屏，也叫做「佔位圖」，是一種在頁面加載過程中展示出頁面基礎框架，提高用戶體驗的技術。它所展示的頁面框架與真實內容對應，好比是一個未完成的畫，給用戶以更直觀的印象。骨架屏技術的應用已非常廣泛，特別是在電商行業，能夠提升產品詳情頁的轉化率。

二、骨架屏的優點

1. 提高用戶體驗：骨架屏的使用能讓用戶在頁面加載過程中看到基礎框架，使用戶體驗更加流暢自然。

2. 減輕服務器壓力：當頁面請求的數據很多時，骨架屏可以先展示，等到數據加載完成再將骨架屏替換成內容，減輕了服務器的壓力。

3. 優化 SEO：搜索引擎爬蟲能夠識別 HTML 中的標籤，骨架屏包含基礎的 HTML 結構，可以幫助搜索引擎優化。

三、骨架屏實現的方法

實現骨架屏的方法有很多，包括基於 PWA 技術的模板生成方案、基於 Vue 的骨架屏生成方案、基於 React 的骨架屏生成方案等。下面講解一種比較簡單的實現方法。

四、骨架屏實現步驟

步驟 1：首先我們需要將頁面元素分類，將其按照頁面元素的類型分成若干組，比如頭部、導航欄、Banner、列表、底部等。

<!-- 骨架屏HTML代碼 -->
<div class="header"></div>
<div class="nav"></div>
<div class="banner"></div>
<ul class="list"></ul>
<div class="footer"></div>

步驟 2：在 CSS 中我們通過特定的樣式去模擬這些組件的樣式。我們可以使用偽類及 background 屬性等去模擬。

/* 頭部 */
.header{
  width: 100%;
  height: 50px;
  background: #f2f2f2;
}

/* 導航欄 */
.nav{
  width: 100%;
  height: 80px;
  background: #f2f2f2;
}

/* Banner */
.banner{
  width: 100%;
  height: 400px;
  background: #f2f2f2;
}

/* 列表 */
.list{
  width: 100%;
  height: 400px;
  background: #f2f2f2;
}

/* 底部 */
.footer{
  width: 100%;
  height: 50px;
  background: #f2f2f2;
}

步驟 3：接下來，在 JS 中，可以通過遍歷頁面元素，將每個元素的 class 屬性替換為對應的「骨架屏」，以實現骨架屏的效果。以下是示例 JS 代碼：

window.onload = function(){
  var skeletonElement = document.querySelectorAll('.skeleton');

  for(var i = skeletonElement.length - 1; i >= 0; i--) {
      var skeletonNode = skeletonElement[i];
      var skeletonCopyNode = skeletonNode.cloneNode(true);
      skeletonCopyNode.className += " skeleton" + i;
      skeletonCopyNode.style.position = "absolute";
      skeletonCopyNode.style.left = skeletonNode.offsetLeft + "px";
      skeletonCopyNode.style.top = skeletonNode.offsetTop + "px";
      skeletonCopyNode.style.width = skeletonNode.offsetWidth + "px";
      skeletonCopyNode.style.height = skeletonNode.offsetHeight + "px";
      skeletonCopyNode.style.zIndex = "999";
      skeletonCopyNode.style.backgroundSize = "200% 100%";
      skeletonNode.parentNode.appendChild(skeletonCopyNode);
  }
  var skeletonElementDelay = document.querySelectorAll('.skeleton-delay');

  for(var i = skeletonElementDelay.length - 1; i >= 0; i--) {
    var skeletonDelayNode = skeletonElementDelay[i];
    var skeletonDelayCopyNode = skeletonDelayNode.cloneNode(true);
    skeletonDelayCopyNode.className += " skeleton-delay" + i;
    skeletonDelayCopyNode.style.position = "absolute";
    skeletonDelayCopyNode.style.left = skeletonDelayNode.offsetLeft + "px";
    skeletonDelayCopyNode.style.top = skeletonDelayNode.offsetTop + "px";
    skeletonDelayCopyNode.style.width = skeletonDelayNode.offsetWidth + "px";
    skeletonDelayCopyNode.style.height = skeletonDelayNode.offsetHeight + "px";
    skeletonDelayCopyNode.style.backgroundColor = "transparent";
    skeletonDelayCopyNode.style.border = "1px solid #f2f2f2";
    skeletonDelayCopyNode.style.borderRadius = "4px";
    skeletonDelayCopyNode.style.zIndex = "999";
    skeletonDelayCopyNode.style.animation = "skeleton-delay .5s ease-in-out forwards";
    skeletonDelayNode.parentNode.appendChild(skeletonDelayCopyNode);
  }
}

通過以上代碼，我們可以看到，JS 中的核心操作是關於頁面元素的遍歷，將遍歷到的元素的 class 屬性替換成對應的「骨架屏」，並賦予對應的樣式。

五、骨架屏實現的注意事項

1. 「骨架屏」元素與真實內容元素的 class 名稱應當一致，以便於對應。

2. 骨架屏通常使用灰色作為背景色。

3. 當真實內容過多時，可以設置動態的骨架屏。

4. 不同元素的骨架屏樣式應當區分開來，以便於用戶更好地感知頁面內容加載的狀態。

5. 當數據加載完成後，應當將骨架屏節點進行刪除，將真實內容節點進行展示。

結語

骨架屏技術可以極大提升用戶體驗，在頁面加載內容過程中讓用戶感受到更優美的效果。不同的骨架屏實現方案有其不同的優缺點，開發者可以根據實際業務需求進行選擇。希望本文能為讀者提供有價值的幫助。