骨架图的模拟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%