深入浅出骨架屏实现原理

一、什么是骨架屏

骨架屏，也叫做“占位图”，是一种在页面加载过程中展示出页面基础框架，提高用户体验的技术。它所展示的页面框架与真实内容对应，好比是一个未完成的画，给用户以更直观的印象。骨架屏技术的应用已非常广泛，特别是在电商行业，能够提升产品详情页的转化率。

二、骨架屏的优点

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. 当数据加载完成后，应当将骨架屏节点进行删除，将真实内容节点进行展示。

结语

骨架屏技术可以极大提升用户体验，在页面加载内容过程中让用户感受到更优美的效果。不同的骨架屏实现方案有其不同的优缺点，开发者可以根据实际业务需求进行选择。希望本文能为读者提供有价值的帮助。