专栏首页薄荷前端前端骨架屏方案小结骨架屏

前端骨架屏方案小结骨架屏

骨架屏

最近在项目不时有用到骨架屏的需求,所以抽时间对骨架屏的方案作了一下调研,骨架屏的实践已经有很多了,也有很多人对自己的方案作了介绍.在这里按照个人的理解做了一个汇总和分类,分享给大家.

关于骨架屏(简介)

骨架屏就是在页面数据尚未加载前先给用户展示出页面的大致结构,直到请求数据返回后再渲染页面,补充进需要显示的数据内容。常用于文章列表、动态列表页等相对比较规则的列表页面。 很多项目中都有应用:ex:饿了么h5版本,知乎,facebook等网站中都有应用。 借个图举例如下:

两类用途

简介中作了关于用途的说明,但是仍然可以继续细分:

  1. 作为spa中路由切换的loading,结合组件的生命周期和ajax请求返回的时机来使用.
  2. 作为首屏渲染的优化.

第一类用途

第一类用途需要自己编写骨架屏,推荐两个成熟方便定制的svg组件定制为骨架屏的方案

作为首屏渲染(自动化方案)

该方案是饿了么在骨架屏的实践中总结出的一套方案:

  1. cssUnit的配置: 需要使用自适应的单位,按照文档给出的选择范围选,直接用 px 生成的比例会不合适
  2. puppeteer有大概80M, 安装的时候有可能不能一次下载成功.
  • 原理:
通过 puppeteer 在服务端操控 headless Chrome 打开开发中的需要生成骨架屏的页面,在等待页面加载
渲染完成之后,在保留页面布局样式的前提下,通过对页面中元素进行删减或增添,对已有元素通过层叠样
式进行覆盖,这样达到在不改变页面布局下,隐藏图片和文字,通过样式覆盖,使得其展示为灰色块。然后
将修改后的 HTML 和 CSS 样式提取出来,这样就是骨架屏了.
复制代码

其他方案

结合ssr render/prerender来使用:

  1. 事先编写好骨架屏组件通过ssr render 解析注入html文件中(除了需要自己编写外其实过程类似于上面的自动化方案)参考文章
  2. 1中事先编写好的骨架屏组件可以用图片代替 (svg) ;或者设计师设计好.

小程序的骨架屏

  1. 不存在预渲染的概念,但是还是可以通过自己预先编写骨架屏组件放在页面中,等到异步请求的数据回来后更新页面.

广而告之

本文发布于薄荷前端周刊,欢迎Watch & Star ★,转载请注明出处。

欢迎讨论,点个赞再走吧 。◕‿◕。 ~

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 【React源码解读】- 组件的实现

    react使用也有一段时间了,大家对这个框架褒奖有加,但是它究竟好在哪里呢? 让我们结合它的源码,探究一二!(当前源码为react16,读者要对react有一定...

    用户2356368
  • 【React 实战教程】从0到1 构建 github star管理工具

    在日常使用github中,除了利用git进行项目版本控制之外,最多的用处就是游览各式的项目,在看到一些有趣或者有用的项目之后,我们通常就会顺手star,目的是日...

    用户2356368
  • React和Vue中,是如何监听变量变化的

    假设有这样一个场景,父组件传递子组件一个A参数,子组件需要监听A参数的变化转换为state。

    用户2356368
  • Seele元一走进台大与名校精英探讨公链如何为产业赋能

    【Seele Global University Tour】Seele元一全球名校行将于9月5日启动。第一站活动,将走进台湾大学资讯工程学系,与台大资工系教授廖...

    Seele元一
  • 人工智能革新艺术发现的可能

    人工智能几乎触及了人类所知的所有行业和学科,文化艺术自然也不例外。Artrendex是一个由人工智能驱动的新界面,它和它的组件ArtPI,或将有望改变艺术被发现...

    AiTechYun
  • 浅析无文件攻击

    在信息安全领域中,“无文件攻击”属于一种影响力非常大的安全威胁。攻击者在利用这种技术实施攻击时,不会在目标主机的磁盘上写入任何的恶意文件,因此而得名“无文件攻击...

    FB客服
  • logstash_output_kafka:Mysql同步Kafka深入详解

    实际业务场景中,会遇到基础数据存在Mysql中,实时写入数据量比较大的情景。迁移至kafka是一种比较好的业务选型方案。

    用户1390885
  • Prometheus基于自动服务发现获取peer/orderer监控数据

    Fabric 1.4支持通过pometheus获取到Fabric网络中的一些状态数据。当Fabric部署在K8s环境中的时候,prometheus可以配置成基于...

    小亮
  • OKHttp源码学习同步请求和异步请求(二)

    在get请求,用到了 Request Response okHttpClient,分别学习一下这三个类

    yuanyuan
  • python统计前十出现最多的词

         “一个可读文件,有一万行,一行只有一个单词,单词可以重复的,求出这一万行中出现频繁次数最多的前10个单词”

    用户2398817

扫码关注云+社区

领取腾讯云代金券