第 136 题：如何实现骨架屏，说说你的思路

Question

骨架屏就是在页面数据尚未加载前先给用户展示出页面的大致结构，直到请求数据返回后再渲染页面，补充进需要显示的数据内容。

Answer 1

5g起来之后，骨架屏也会随之变得不那么重要了吧 

Answer 2

想问下vue-skeleton-webpack-plugin这个插件一开始注入了骨架 那他是怎么样判断页面加载完成去把这个骨架去掉的呢

Answer 3

[v-cloak] { background: gray; }

哈哈哈哈把自己逗笑了

你真是个人才哈哈哈哈

Answer 4

CSS 3

http://getskeleton.com/

demo

https://codepen.io/xgqfrms/full/zQEJWw

Answer 5

我之前研究过饿了么的骨架屏。
核心思想就是：1.puppeteer 当 Puppeteer 连接到一个 Chromium 实例的时候会通过 puppeteer.launch 或 puppeteer.connect 创建一个 Browser 对象。这个时候你就会获得当前页面的dom结构。
2.获取你需要做骨架屏的dom元素的宽高，你还可以排除一些你不想做骨架屏的元素。
3.已知了宽高，你就可以去改她的背景颜色变成一个灰色的方框，看起来就会像一个骨架屏了

附赠我之前写的一片文章：https://juejin.im/post/5bcc169ae51d450e85308d86

Answer 6

我之前研究过饿了么的骨架屏。
核心思想就是：1.puppeteer 当 Puppeteer 连接到一个 Chromium 实例的时候会通过 puppeteer.launch 或 puppeteer.connect 创建一个 Browser 对象。这个时候你就会获得当前页面的dom结构。
2.获取你需要做骨架屏的dom元素的宽高，你还可以排除一些你不想做骨架屏的元素。
3.已知了宽高，你就可以去改她的背景颜色变成一个灰色的方框，看起来就会像一个骨架屏了

Answer 7

饿了么团队开源的根据页面样式生成骨架屏的工具[还可配置生效路由

饿了么 这个开源的骨架屏 在哪 找不见。。。

Jocs/jocs.github.io#22

Answer 8

1.指令：
首先要有骨架效果的dom必须要有初始的width,height
在刚插入的钩子函数里面去获取dom，设置css渐变动画。
在有数据进来时，在update的钩子函数里面去删除骨骼动画。

Answer 9

饿了么团队开源的根据页面样式生成骨架屏的工具[还可配置生效路由

饿了么 这个开源的骨架屏 在哪 找不见。。。

Answer 10

写一个基础组件，就写一个全灰色的背景块，然后所有的内容块都可以继承当前组件，只需要检测当前内容块是否加载完成，控制背景块的显示/隐藏

Answer 11

1、服务器端渲染
2、加载完成之前使用图片代替

Answer 12

[v-cloak] { background: gray; }

哈哈哈哈把自己逗笑了

Answer 13

请问各位，骨架屏的原理是什么呢？

Answer 14

1.如果是首屏可以在index.html中手写骨架屏样式
2.如果是其他页面，可以让UI做一个小的SVG图
3.可以使用组件库中的骨架屏组件
4.可以使用饿了么团队开源的根据页面样式生成骨架屏的工具[还可配置生效路由]

Answer 15

1. 封装多个不同大小的模块
2. 根据页面需求配置组合模块
3. 请求数据并处理成功后替换

Answer 16

1. 将app的默认样式写成灰色，当获取到数据之后，为body替换成新的样式
2. 灰色的骨架屏可以是一张图片，数据取到之后再替换为dom节点

Answer 17

获取dom节点和样式 然后写一套对应覆盖样式生成灰色块覆盖原有的内容

Answer 18

最小粒度组件，根据页面可拼装不同的骨架屏。。。