最近在项目不时有用到骨架屏的需求,因此抽时间对骨架屏的方案做了一下调研,骨架屏的实践已经有不少了,也有不少人对本身的方案做了介绍.在这里按照我的的理解作了一个汇总和分类,分享给你们.css
骨架屏就是在页面数据还没有加载前先给用户展现出页面的大体结构,直到请求数据返回后再渲染页面,补充进须要显示的数据内容。经常使用于文章列表、动态列表页等相对比较规则的列表页面。 不少项目中都有应用:ex:饿了么h5版本,知乎,facebook等网站中都有应用。
借个图举例以下: html
简介中做了关于用途的说明,可是仍然能够继续细分:前端
第一类用途须要本身编写骨架屏,推荐两个成熟方便定制的svg组件定制为骨架屏的方案vue
该方案是饿了么在骨架屏的实践中总结出的一套方案:react
px
生成的比例会不合适经过 puppeteer 在服务端操控 headless Chrome 打开开发中的须要生成骨架屏的页面,在等待页面加载
渲染完成以后,在保留页面布局样式的前提下,经过对页面中元素进行删减或增添,对已有元素经过层叠样
式进行覆盖,这样达到在不改变页面布局下,隐藏图片和文字,经过样式覆盖,使得其展现为灰色块。而后
将修改后的 HTML 和 CSS 样式提取出来,这样就是骨架屏了.
复制代码
结合ssr render/prerender来使用:webpack
事先编写好骨架屏组件经过ssr render 解析注入html文件中(除了须要本身编写外其实过程相似于上面的自动化方案)参考文章git
1中事先编写好的骨架屏组件能够用图片代替 (svg) ;或者设计师设计好.github
本文发布于薄荷前端周刊,欢迎Watch & Star ★,转载请注明出处。web