简单实现骨架屏（Skeleton Screens）

近年，国内外各大网站都引入骨架屏（Skeleton Screens）技术来提高用户体验。相比于之前的Loading动画，骨架屏页面更容易让用户产生一种错觉，页面快加载完了。骨架屏实现原理很简单，就是通过占位线框元素，渐进式加载数据。

PS：骨架屏占位应用最早可以追溯到图片懒加载。

实现骨架屏方式很多，以下是web端最简单实现骨架屏的方式。

<!DOCTYPE html>

<html>

  <head>

    <meta charset="UTF-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <meta http-equiv="X-UA-Compatible" content="ie=edge" />

    <link href="https://cdn.bootcss.com/weui/2.1.2/style/weui.min.css" rel="stylesheet" />

    <title>Skeletons</title>

    <style>

      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%);

        }

      }

    </style>

  </head>

  <body>

    <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>

    <script>

      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)

    </script>

  </body>

</html>

优点

让应用程序感觉更有表现力，吸引更多的注意力。

内容还在加载中，用户也可以自由地滚动并与应用程序交互。

PS：个人观点，不认为这是一种优势，反而会容易发生数据交互的错误。

缺点

增加程序运行负担，无法根本解决页面加载性能问题。

开发工作量大，对特定页面数据额外绘制动画效果。

总结：骨架屏适用一些固定位置元素，不适用于一些动态位置元素。（比如：列表渲染数据）建议采用Loading动画+懒/预加载技术提高用户体验与性能。

经观察，大多数网站动态数据的骨架渲染也就渲染成一条。个人猜测，列表渲染之所以渲染一条，多条不合适。假设骨架屏渲染三条占位元素，结果数据返回一条数据，那就尴尬了。

简单实现骨架屏（Skeleton Screens）的更多相关文章

vue-cli2.0项目添加骨架屏
1.创建项目 npm init webpack project 3.下载 vue-skeleton-webpack-plugin 插件 npm install vue-skeleton-webpa ...
Skeleton Screen — 骨架屏
用户体验一直是前端开发需要考虑的重要部分,在数据请求时常见到锁屏的loading动画,而现在越来越多的产品倾向于使用Skeleton Screen Loading(骨架屏)替代,以优化用户体验. Sk ...
Skeleton Screen -- 骨架屏--应用
案例:使用现已经在支付的项目使用用户体验一直是前端开发需要考虑的重要部分,在数据请求时常见到锁屏的loading动画,而现在越来越多的产品倾向于使用Skeleton Screen Loading( ...
《前端之路》之前端图片类型 & 优化 & 预加载 & 懒加载 & 骨架屏
目录 09: 前端图片类型 & 优化 & 预加载 & 懒加载 & 骨架屏 09: 前端图片类型 & 优化 & 预加载 & 懒加载 & ...
Vue 项目骨架屏注入与实践
作为与用户联系最为密切的前端开发者,用户体验是最值得关注的问题.关于页面loading状态的展示,主流的主要有loading图和进度条两种.除此之外,越来越多的APP采用了“骨架屏”的方式去展示未加载 ...
微信小程序 - 深度定义骨架屏（提示）
此举每个页面必须创建对应的css样式,比较麻烦(但非常准确),推荐使用组件化的skeleton组件原理很简单:知晓一下this.setData原理,就OK了,可能大家会因此了解到全屏加载loadin ...
Vue页面骨架屏(二)
实现思路参考原文中在构建时使用 Vue 预渲染骨架屏一节介绍的思路,我将骨架屏也看成路由组件,在构建时使用 Vue 预渲染功能,将骨架屏组件的渲染结果 HTML 片段插入 HTML 页面模版的挂载点 ...
Vue页面骨架屏（一）
在开发webapp的时候总是会受到首屏加载时间过长的影响,主流的解决方法是在载入完成之前显示loading图效果,而一些大公司会配置一套服务端渲染的架构来解决这个问题.考虑到ssr所要解决的一系列问题 ...
如何在微信小程序中使用骨架屏
先上效果图

随机推荐

Forsaken给学生分组
链接:https://ac.nowcoder.com/acm/contest/1221/C来源:牛客网时间限制:C/C++ 1秒,其他语言2秒空间限制:C/C++ 262144K,其他语言5242 ...
python之代码规范
第一章为什么要有规范化目录真正的后端开发的项目,系统等,少则几万行代码,多则十几万,几十万行代码软件开发,规范你的项目目录结构,代码规范,遵循PEP8规范等等,让你更加清晰,合理开发. 1.代码 ...
未能将文件 bin\zh-CHS\Webdiyer.MvcPager.resources.dll 复制到 obj\Release\Package\PackageTmp\bin\zh-CHS\Webdiyer.MvcPager.resources.dll。未能找到文件“bin\zh-CHS\Webdiyer.MvcPager.resources.dll”
在bin下面会生成更dll相同名称的xml文件,可能是因为我之前把项目中的很多部分设置了从项目中排除,关于dll也提示复制的问题解决办法是直接把那些生成的xml文件删除.在发布时还会提示obj文件夹下 ...
myql命令行乱码问题，以及设置数据库编码
使用命令修改数据库编码格式参见:https://www.cnblogs.com/clsn/p/8047028.html#auto_id_3 命令行乱码设置修改参见:https://www.cnblog ...
SVM支持向量机(1)
一.SVM模型 1.函数间隔与几何间隔,哪一条线是最好的? (1)公式化问题. 分类模型:当里面的值小于0的时候就是-1,当里面的值是大于等于0的时候就是1 函数间隔:前面乘以y(i),是为了保持数值 ...
spring boot引入thymeleaf导致中文乱码
加上下面这句代码 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" / ...
Codeforces 987 K预处理BFS 3n,7n+1随机结论题/不动点逆序对 X&Y=0连边DFS求连通块数目
A /*Huyyt*/ #include<bits/stdc++.h> #define mem(a,b) memset(a,b,sizeof(a)) #define pb push_bac ...
Codeforces 902 树同型构造多项式长除法构造(辗转相除法)
A #include <bits/stdc++.h> #define PI acos(-1.0) #define mem(a,b) memset((a),b,sizeof(a)) #def ...
Caffe学习使用__运行caffe自带的两个简单例子
为了程序的简洁,在caffe中是不带练习数据的,因此需要自己去下载.但在caffe根目录下的data文件夹里,作者已经为我们编写好了下载数据的脚本文件,我们只需要联网,运行这些脚本文件就行了. 注意: ...
ajax 请求成功，但是后台feigin请求超时解决方案
========后台请求数据时间较长,报feigin超时错误====== fegin报错如下: feign.RetryableException: Read timed out executing P ...

简单实现骨架屏 （Skeleton Screens）

简单实现骨架屏 （Skeleton Screens）的更多相关文章

随机推荐

热门专题

简单实现骨架屏（Skeleton Screens）

简单实现骨架屏（Skeleton Screens）的更多相关文章