骨架图的模拟js实现

场景

为了提升体验，我们这边在页面初始渲染时加入了骨架图来代替loading，在拿到数据后再渲染数据，更改组件的展示。感觉确实比loading要提升体验，开始没接触过，对这部分比较感兴趣，就尝试着用html+css+js实现了一个简略版的骨架图，其效果如下

骨架图本质上也是在数据未接收到时的页面初始展示，相比于loading体验更好，让用户产生加载数据更快的错觉，其实现html+css+js如下

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>模拟骨架图</title><style>html,body {width: 100%;height: 100%;padding: 0;margin: 0;}.box .top, .box .bottom {font-size: 20px;display: flex;align-items: center;justify-content: center;}.box {width: 100%;height: 100%;display: flex;flex-direction: column;}.top {flex: 1;background-color: red;}.center {flex: 8;background: orange;display: flex;}.left {flex: 1;background: blue;}.left div {font-size: 18px;margin-left: 5px;margin-top: 10px;}.right div {font-size: 20px;margin-left: 45px;margin-top: 20px;}.right {flex: 2;background-color: pink;}.bottom {flex: 1;background: green;}.box .top.no-data, .box .bottom.no-data {background-color: #fff;}.box .top.no-data div, .box .bottom.no-data div {width: 86px;height: 30px;background-color: #ccc;}.left.no-data {background: #fff;}.left.no-data div{height: 25px;width: 100px;background: #ccc;}.right.no-data {background: #fff;}.right.no-data div {height: 25px;width: 200px;background: #ccc;}</style>
</head>
<body><div class="box"><div class="top no-data"><div><!-- 我是头部 --></div></div><div class="center"><div class="left no-data"><div><!-- 1 --></div><div><!-- 2 --></div><div><!-- 3 --></div></div><div class="right no-data"><div><!-- 哈哈哈 --></div><div><!-- 呼呼呼 --></div><div><!-- 嘿嘿嘿 --></div></div></div><div class="bottom no-data"><div><!-- 我是尾部 --></div></div></div><script>const nameArr = ['.top', '.left', '.right', '.bottom']const obj = {'.top': ['我是头部'],'.left': ['1', '2', '3'],'.right': ['哈哈哈', '呼呼呼', '嘿嘿嘿'],'.bottom': ['我是底部'],}// 模拟后端请求nameArr.forEach(name => {const selector = document.querySelector(`${name}`)const selectorArr = selector.querySelectorAll('div')const randomTime = Math.floor(Math.random() * 5000)setTimeout(() => {selectorArr.forEach((item,index) => {item.textContent = obj[name][index]})selector.classList.remove('no-data')},randomTime)})</script>
</body>
</html>

小结

我认为前端的一大部分就是为提升用户体验而努力，通过各种尽可能的手段提升用户的体验，一个好的产品不可缺少的就是用户体验。为此也要好好学习，因为你学的知识不只是为了面试亦或提高自己，说不定这些知识在某一天真的为别人所服务了呢。

骨架图的模拟js实现相关推荐

ThreeJS 骨架图显示、骨骼修改颜色
ThreeJS 骨架图显示.骨骼修改颜色郭隆邦_技术博客 http://www.yanhuangxueyuan.com http://www.yanhuangxueyuan.com/Three.js ...
微信小程序之PC端不支持 wx.previewMedia 方法故用自定义轮播图进行模拟照片视频的播放
微信小程序自带的方法 wx.previewMedia 预览图片和视频. 图片 wx.previewImage 支持PC端可以进行播放, 视频没有找到对应的方法在真机和手机端都可以进项展示,PC端不 ...
html怎么引轮播图插件,原生js写一个无缝轮播图插件(支持vue)
轮播图插件(Broadcast.js) 前言:写这个插件的原因前段时间准备用vue加上网易云的nodejs接口,模拟网易云音乐移动端.因为想自己写一遍所有的代码以及加固自己的flex布局,所以没有使 ...
模拟JS触发按钮点击功能
模拟JS触发按钮点击功能 Html代码 <html> <head> <title>usually function</title> </hea ...
左右全屏banner焦点图代码特效+苹果官网首页左右全屏banner焦点图效果+包括JS图片CSS样式等
介绍源码名称:[左右全屏banner焦点图]代码特效+苹果官网首页左右全屏banner焦点图效果+包括JS图片CSS样式等源码大小:16.6KB 开发语言:PHP+Mysql 操作系统:Windo ...
Kinect V2开发（5）绘制骨架图
上一篇中已经读出了关节数据,这一次主要是在OpenCV中给各个关节点连线,绘制骨架图. 在上一篇中我们已经知道,关节点的位置信息是在CameraSpacePoint即摄像机空间坐标系中,要在OpenC ...
js实现轮播图，模拟flash上下滚动（原生JS，没有任何框架）
//以下是需要用到的js 最好封装 function startMove(obj, json, fnend) { clearInterval(obj.timer); //防止定时器叠加 obj.ti ...
论文研读-图可视化-NetV.js:Web端可视化工具库
NetV.js:一个基于网络的用于大规模图和网络的高效可视化的库 1 论文概述 1.1 文章摘要 1.2 引言 1.3 文章脉络 2 相关工作 3 设计 3.1 设计要求 3.2 设计细节 3.2.1 ...
爬取虎牙之二：试用htmlunit模拟js爬取ajax页面
jsoup无法爬取动态的ajax界面,百度了许久之后有人说htmlunit等爬虫工具可以支持模拟浏览器行为,百度上查了htmlunit的简单用法,爬取虎牙直播分栏的js链接.模拟点击.获取点击后的下一 ...

骨架图的模拟js实现

骨架图的模拟js实现

场景

小结

骨架图的模拟js实现相关推荐

最新文章

热门文章