第 136 题：如何实现骨架屏，说说你的思路
yygmind opened this issue · comments
最小粒度组件，根据页面可拼装不同的骨架屏。。。
获取dom节点和样式 然后写一套对应覆盖样式生成灰色块覆盖原有的内容
- 将app的默认样式写成灰色，当获取到数据之后，为body替换成新的样式
- 灰色的骨架屏可以是一张图片，数据取到之后再替换为dom节点
- 封装多个不同大小的模块
- 根据页面需求配置组合模块
- 请求数据并处理成功后替换
1.如果是首屏可以在index.html中手写骨架屏样式
2.如果是其他页面，可以让UI做一个小的SVG图
3.可以使用组件库中的骨架屏组件
4.可以使用饿了么团队开源的根据页面样式生成骨架屏的工具[还可配置生效路由]
请问各位，骨架屏的原理是什么呢？
[v-cloak] { background: gray; }
哈哈哈哈把自己逗笑了
1、服务器端渲染
2、加载完成之前使用图片代替
写一个基础组件，就写一个全灰色的背景块，然后所有的内容块都可以继承当前组件，只需要检测当前内容块是否加载完成，控制背景块的显示/隐藏
饿了么团队开源的根据页面样式生成骨架屏的工具[还可配置生效路由
饿了么 这个开源的骨架屏 在哪 找不见。。。
1.指令：
首先要有骨架效果的dom必须要有初始的width,height
在刚插入的钩子函数里面去获取dom，设置css渐变动画。
在有数据进来时，在update的钩子函数里面去删除骨骼动画。
饿了么团队开源的根据页面样式生成骨架屏的工具[还可配置生效路由
饿了么 这个开源的骨架屏 在哪 找不见。。。
我之前研究过饿了么的骨架屏。
核心**就是：1.puppeteer 当 Puppeteer 连接到一个 Chromium 实例的时候会通过 puppeteer.launch 或 puppeteer.connect 创建一个 Browser 对象。这个时候你就会获得当前页面的dom结构。
2.获取你需要做骨架屏的dom元素的宽高，你还可以排除一些你不想做骨架屏的元素。
3.已知了宽高，你就可以去改她的背景颜色变成一个灰色的方框，看起来就会像一个骨架屏了
我之前研究过饿了么的骨架屏。
核心**就是：1.puppeteer 当 Puppeteer 连接到一个 Chromium 实例的时候会通过 puppeteer.launch 或 puppeteer.connect 创建一个 Browser 对象。这个时候你就会获得当前页面的dom结构。
2.获取你需要做骨架屏的dom元素的宽高，你还可以排除一些你不想做骨架屏的元素。
3.已知了宽高，你就可以去改她的背景颜色变成一个灰色的方框，看起来就会像一个骨架屏了
附赠我之前写的一片文章：https://juejin.im/post/5bcc169ae51d450e85308d86
[v-cloak] { background: gray; }哈哈哈哈把自己逗笑了
你真是个人才哈哈哈哈
想问下vue-skeleton-webpack-plugin这个插件一开始注入了骨架 那他是怎么样判断页面加载完成去把这个骨架去掉的呢
5g起来之后，骨架屏也会随之变得不那么重要了吧 🤔
5g起来之后，骨架屏也会随之变得不那么重要了吧 🤔
是呢。。性能优化也不那么重要了
我猜测大部分企业都是选择服务端渲染，可以是不同模块拼接，也可以是封装好直接调用。
检测当前内容块是否加载完成，控制背景块的显示/隐藏
这样每个部分真实内容的显现时机会不一样吧
[v-cloak] { background: gray; }哈哈哈哈把自己逗笑了
这样每个部分真实内容的显现时机会不一样吧
利用redux-middleware，每次发起请求前先加载骨架屏😁
