Open qappleh opened 5 years ago
1.如果是首屏可以在index.html中手写骨架屏样式 2.如果是其他页面，可以让UI做一个小的SVG图 3.可以使用组件库中的骨架屏组件 4.可以使用饿了么团队开源的根据页面样式生成骨架屏的工具[还可配置生效路由]
饿了么骨架屏核心思想就是： 1.puppeteer 当 Puppeteer 连接到一个 Chromium 实例的时候会通过 puppeteer.launch 或 puppeteer.connect 创建一个 Browser 对象。这个时候你就会获得当前页面的dom结构。 2.获取你需要做骨架屏的dom元素的宽高，你还可以排除一些你不想做骨架屏的元素。 3.已知了宽高，你就可以去改她的背景颜色变成一个灰色的方框，看起来就会像一个骨架屏了
参考链接： Webpack插件自动生成骨架页面 一种自动化生成骨架屏的方案 前端骨架屏方案小结 首页白屏的引发的思考
演示demo: Skeleton Screen with CSS http://getskeleton.com/
在文档库里建了一个前端骨架屏的资料库，里面有精选文章，有需要的可以点击查看，前端骨架屏资料库
1.如果是首屏可以在index.html中手写骨架屏样式 2.如果是其他页面，可以让UI做一个小的SVG图 3.可以使用组件库中的骨架屏组件 4.可以使用饿了么团队开源的根据页面样式生成骨架屏的工具[还可配置生效路由]
饿了么骨架屏核心思想就是： 1.puppeteer 当 Puppeteer 连接到一个 Chromium 实例的时候会通过 puppeteer.launch 或 puppeteer.connect 创建一个 Browser 对象。这个时候你就会获得当前页面的dom结构。 2.获取你需要做骨架屏的dom元素的宽高，你还可以排除一些你不想做骨架屏的元素。 3.已知了宽高，你就可以去改她的背景颜色变成一个灰色的方框，看起来就会像一个骨架屏了
参考链接： Webpack插件自动生成骨架页面
一种自动化生成骨架屏的方案 前端骨架屏方案小结 首页白屏的引发的思考
演示demo:
Skeleton Screen with CSS
http://getskeleton.com/
在文档库里建了一个前端骨架屏的资料库，里面有精选文章，有需要的可以点击查看，前端骨架屏资料库