Skeleton Scree(骨架屏)


骨架屏:Skeleton Screen。也被称为加载占位图。它是在页面数据尚未加载前先给用户展示出页面的大致结构,进而等到数据请求返回后再显示页面的数据内容,从而替换它。常用于文章列表、新闻动态列表等内容结构相一致的页面。例如淘宝、饿了么、知乎等很多网站都有应用。

骨架屏示例

页面加载完成前


页面加载完成后


页面加载完成前


页面加载完成后


为什么要使用骨架屏?

在使用终端设备请求数据时都会出现一定的延迟,屏幕从而会出现一大片空白,以前对于这段等待时间的处理大多数都是采用菊花图加载动画或者类似于以下这种的加载动画。


这种方式请求时页面会卡住,直到请求完成,用户期间无法进行任何的操作,只能看着加载动效图,给人一种死机的感觉,体验差。为了进一步提升用户的体验,于是就出现了另一种加载方式——骨架屏( Skeleton Screen )。

骨架屏的优势

  • 锁屏 Loading 在一定程度上限制了用户的操作,而骨架屏不干扰用户的操作。
  • 用户对于加载的内容有一个大致的框架。
  • 弱网络环境下极大的优化了用户体验。

如何实现骨架屏

原理

在不改变页面布局下,隐藏图片和文字,通过样式的覆盖,使其展示为灰色块。等到加载完成后,将修改后的元素和样式提取出来

步骤

创建与显示内容相似的 html 结构
在需要显示内容的元素上增加背景色

方式

简单堆砌出元素结构
使用背景动画,修改 css 样式

一个简单的骨架屏案例

HTML代码
<head>
  <link href="https://cdn.bootcss.com/weui/2.1.2/style/weui.min.css" rel="stylesheet" />
</head>
<div class="weui-panel weui-panel_access">
    <div class="weui-panel__hd">
      <span class="weui-panel-title skeletons"></span>
    </div>
    <div class="weui-panel__bd">
      <a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg pointer-stop">
        <div class="weui-media-box__hd">
          <div class="media-box-img skeletons"></div>
        </div>
        <div class="weui-media-box__bd">
          <div class="weui-media-box__title skeletons"></div>
          <p class="weui-media-box__desc">
            <span class="media-box-desc skeletons"></span>
          </p>
        </div>
      </a>
    </div>
  </div>
CSS代码
img {
  width: 100%;
}

.media-box-img {
  width: 60px;
  height: 60px;
}

/* 阻止Skeletons点击事件 */
.pointer-stop {
  pointer-events: none;
}

/* Skeletons效果 */
.skeletons {
  position: relative;
  display: block;
  overflow: hidden;
  height: 100%;
  min-height: 20px;
  background-color: #ededed;
}

.skeletons:empty::after {
  display: block;
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(216, 216, 216, 0.753), transparent);
  -webkit-animation: loading 1.5s infinite;
  animation: loading 1.5s infinite;
}

@-webkit-keyframes loading {
  100% {
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
  }
}

@keyframes loading {
  100% {
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
  }
}
JS代码
function renderCard() {
  var cardImage = document.querySelector('.weui-panel-title')
  cardImage.textContent = '标题'
  cardImage.classList.remove('skeletons')
  var listData = [{
    img: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAB4CAMAAAAOusbgAAAAeFBMVEUAwAD///+U5ZTc9twOww7G8MYwzDCH4YcfyR9x23Hw+/DY9dhm2WZG0kbT9NP0/PTL8sux7LFe115T1VM+zz7i+OIXxhes6qxr2mvA8MCe6J6M4oz6/frr+us5zjn2/fa67rqB4IF13XWn6ad83nxa1loqyirn+eccHxx4AAAC/klEQVRo3u2W2ZKiQBBF8wpCNSCyLwri7v//4bRIFVXoTBBB+DAReV5sG6lTXDITiGEYhmEYhmEYhmEYhmEY5v9i5fsZGRx9PyGDne8f6K9cfd+mKXe1yNG/0CcqYE86AkBMBh66f20deBc7wA/1WFiTwvSEpBMA2JJOBsSLxe/4QEEaJRrASP8EVF8Q74GbmevKg0saa0B8QbwBdjRyADYxIhqxAZ++IKYtciPXLQVG+imw+oo4Bu56rjEJ4GYsvPmKOAB+xlz7L5aevqUXuePWVhvWJ4eWiwUQ67mK51qPj4dFDMlRLBZTqF3SDvmr4BwtkECu5gHWPkmDfQh02WLxXuvbvC8ku8F57GsI5e0CmUwLz1kq3kD17R1In5816rGvQ5VMk5FEtIiWislTffuDpl/k/PzscdQsv8r9qWq4LRWX6tQYtTxvI3XyrwdyQxChXioOngH3dLgOFjk0all56XRi/wDFQrGQU3Os5t0wJu1GNtNKHdPqYaGYQuRDfbfDf26AGLYSyGS3ZAK4S8XuoAlxGSdYMKwqZKM9XJMtyqXi7HX/CiAZS6d8bSVUz5J36mEMFDTlAFQzxOT1dzLRljjB6+++ejFqka+mXIe6F59mw22OuOw1F4T6lg/9VjL1rLDoI9Xzl1MSYDNHnPQnt3D1EE7PrXjye/3pVpr1Z45hMUdcACc5NVQI0bOdS1WA0wuz73e7/5TNqBPhQXPEFGJNV2zNqWI7QKBd2Gn6AiBko02zuAOXeWIXjV0jNqdKegaE/kJQ6Bfs4aju04lMLkA2T5wBSYPKDGF3RKhFYEa6A1L1LG2yacmsaZ6YPOSAMKNsO+N5dNTfkc5Aqe26uxHpx7ZirvgCwJpWq/lmX1hA7LyabQ34tt5RiJKXSwQ+0KU0V5xg+hZrd4Bn1n4EID+WkQdgLfRNtvil9SPfwy+WQ7PFBWQz6dGWZBLkeJFXZGCfLUjCgGgqXo5TuSu3cugdcTv/HjqnBTEMwzAMwzAMwzAMwzAMw/zf/AFbXiOA6frlMAAAAABJRU5ErkJggg==',
    desc: '内容内容内容内容'
  }]
  var html = ''
  var cardImage1 = document.querySelectorAll('.media-box-img')
  var cardImage2 = document.querySelectorAll('.weui-media-box')
  var cardImage3 = document.querySelectorAll('.weui-media-box__title')
  var cardImage4 = document.querySelectorAll('.media-box-desc')
  for (var i = 0; i < listData.length; i++) {
    cardImage2[i].classList.remove('pointer-stop')
    cardImage1[i].classList.remove('skeletons')
    cardImage3[i].classList.remove('skeletons')
    cardImage4[i].classList.remove('skeletons')
    cardImage1[i].innerHTML = "<img src='" + listData[i].img + "' />"
    cardImage3[i].innerHTML = '这是标题'
    cardImage4[i].innerHTML = '这是描述'
  }
}
setTimeout(function () {
  renderCard()
}, 4000)

点击此处下载骨架屏示例源码!!!

如遇下载连接失效请在下方留言!!!

本文资料源自网络收集。

声明:予安博客 | 版权所有 | 如未注来源,均为原创 | 本网站采用BY-NC-SA协议进行授权

转载:转载请注明原文链接 - Skeleton Scree(骨架屏)


慎终如始,则无败事。