近年,国内外各大网站都引入骨架屏(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)的更多相关文章

  1. vue-cli2.0项目 添加骨架屏

    1.创建项目 npm init webpack project 3.下载   vue-skeleton-webpack-plugin 插件 npm install vue-skeleton-webpa ...

  2. Skeleton Screen — 骨架屏

    用户体验一直是前端开发需要考虑的重要部分,在数据请求时常见到锁屏的loading动画,而现在越来越多的产品倾向于使用Skeleton Screen Loading(骨架屏)替代,以优化用户体验. Sk ...

  3. Skeleton Screen -- 骨架屏--应用

    案例:使用 现已经在支付的项目使用 用户体验一直是前端开发需要考虑的重要部分,在数据请求时常见到锁屏的loading动画,而现在越来越多的产品倾向于使用Skeleton Screen Loading( ...

  4. 《前端之路》之 前端图片 类型 & 优化 & 预加载 & 懒加载 & 骨架屏

    目录 09: 前端图片 类型 & 优化 & 预加载 & 懒加载 & 骨架屏 09: 前端图片 类型 & 优化 & 预加载 & 懒加载 & ...

  5. Vue 项目骨架屏注入与实践

    作为与用户联系最为密切的前端开发者,用户体验是最值得关注的问题.关于页面loading状态的展示,主流的主要有loading图和进度条两种.除此之外,越来越多的APP采用了“骨架屏”的方式去展示未加载 ...

  6. 微信小程序 - 深度定义骨架屏(提示)

    此举每个页面必须创建对应的css样式,比较麻烦(但非常准确),推荐使用组件化的skeleton组件 原理很简单:知晓一下this.setData原理,就OK了,可能大家会因此了解到全屏加载loadin ...

  7. Vue页面骨架屏(二)

    实现思路 参考原文中在构建时使用 Vue 预渲染骨架屏一节介绍的思路,我将骨架屏也看成路由组件,在构建时使用 Vue 预渲染功能,将骨架屏组件的渲染结果 HTML 片段插入 HTML 页面模版的挂载点 ...

  8. Vue页面骨架屏(一)

    在开发webapp的时候总是会受到首屏加载时间过长的影响,主流的解决方法是在载入完成之前显示loading图效果,而一些大公司会配置一套服务端渲染的架构来解决这个问题.考虑到ssr所要解决的一系列问题 ...

  9. 如何在微信小程序中使用骨架屏

    先上效果图

随机推荐

  1. CF 11D A Simple Task 题解

    题面 这道题的数据范围一看就是dfs或状压啦~ 本文以状压的方式来讲解 f[i][j]表示目前的节点是i,已经经历过的节点的状态为j的简单环的个数: 具体的转移方程和细节请看代码: PS:(i& ...

  2. Python 最常见的 170 道面试题全解析:2019 版

    Python 最常见的 170 道面试题全解析:2019 版 引言 最近在刷面试题,所以需要看大量的 Python 相关的面试题,从大量的题目中总结了很多的知识,同时也对一些题目进行拓展了,但是在看了 ...

  3. 生成二维码(java后端)

    需要引入2个jar包: <dependency> <groupId>com.google.zxing</groupId> <artifactId>jav ...

  4. React-native 底部导航栏(二)

    1.组件安装:npm install react-native-router-flux --save 2.定义菜单图片和文字: import React, { Component } from 're ...

  5. Bootstrap4中栅格系统CSS中 col-sm-* col-md-* col-lg-*的意义以及当其同时具有col-xs-* col-sm-* col-md-* col-lg-*的含义

    根据Bootstrap--Grid 中 col-sm-* col-md-* col-lg-* col-xl-*的意义: .col-sm-* 小屏幕 手机 (≥ 576px) .col-md-* 中等屏 ...

  6. js 学习四 对象应用 吃货游戏

    游戏来源于 Mdn学习网站: 该例子用于对象的理解非常有效(建议看完上面网站的内容在开始练习) 弹球 body { margin: 0; overflow: hidden; font-family: ...

  7. thinkphp+webuploader实现大文件分片上传

    大文件分片上传,简单来说就是把大文件切分为小文件,然后再一个一个的上传,到最后由这些小文件再合并成原来的文件 webuploader下载地址及其文档:http://fex.baidu.com/webu ...

  8. mongoose 开源http库

    Mongoose是一个用C编写的网络库.它为客户端和服务器模式实现TCP,UDP,HTTP,WebSocket,CoAP,MQTT的事件驱动的非阻塞API. 设计理念: Mongoose有三个基本的数 ...

  9. html 自动跳转页面

    三种简单的html网页自动跳转方法,可以让你在打开一个html网页时自动跳转到其它的页面. 方法一. <html> <head> <meta http-equiv=&qu ...

  10. Centos6 修复grub损坏故障

    1.查看系统中的/boot/grub/grub.conf # grub.conf generated by anaconda # # Note that you do not have to reru ...