自动生成跨多端骨架屏

栏目: CSS · 发布时间: 5年前

内容简介:Skeleton Screen,中文称之为骨架屏。表示在页面数据没有加载完成之前,用一些简单的图形描绘页面内容的大致布局,让用户感知页面正在加载;当数据加载完成后,用真实的数据渲染页面,把它替换掉。在骨架屏诞生之前,业界大多数都是用菊花图之类的loading效果去做数据等待期的加载效果展示,但是这种效果对于用户体验却未必优秀,当用户聚焦于菊花图时,就像学生盯着下课前的5分钟,感知上时间会变慢,很容易滋生焦躁情绪,如果是弱网情况下可能用户直接就关闭页面了。如果我们能在页面真实内容呈现之前先把页面内容的轮廓展示

Skeleton Screen,中文称之为骨架屏。表示在页面数据没有加载完成之前,用一些简单的图形描绘页面内容的大致布局,让用户感知页面正在加载;当数据加载完成后,用真实的数据渲染页面,把它替换掉。

在骨架屏诞生之前,业界大多数都是用菊花图之类的loading效果去做数据等待期的加载效果展示,但是这种效果对于用户体验却未必优秀,当用户聚焦于菊花图时,就像学生盯着下课前的5分钟,感知上时间会变慢,很容易滋生焦躁情绪,如果是弱网情况下可能用户直接就关闭页面了。

如果我们能在页面真实内容呈现之前先把页面内容的轮廓展示出来,然后再逐步展示真正的内容,这样既能给用户一种内容正在被加载即将呈现出来的期待,也能降低用户等待过程中的焦躁情绪,同时还能使页面加载的过程变得更加丝滑,感官上会更加自然流畅,而骨架屏就是为此而生。

如何生成骨架屏

要生成骨架屏,我们可以怎么做呢?

答案一:手写骨架屏代码,这种方案可能大家的反应是下面这样

自动生成跨多端骨架屏

答案二:自动生成?

自动生成骨架屏看起来似乎很难做到,主要困难点在于:

  • 页面真实内容结构难以自动获取

  • 如果拿到了页面结构,如何根据页面结构生成骨架屏的节点和样式

这两个问题目前采用一些前端技术其实也可以解决,我写了一个webpack插件 skeleton-webpack-plugin 可以实现在你本地运行dev server预览页面的时候生成该页面骨架屏的html与css,总体思路如下图所示:

自动生成跨多端骨架屏

但是到这里我们只是生成了在h5环境可以使用的骨架屏,回到我们的主题,我们想要的是跨多端哦,也就是说iOS,android,小程序等等我全都要,这个又该如何实现呢?

skeleton-weex-plugin

目前我们团队内部在weex的基础上开发了一套跨端开发框架,借助这套框架我们可以基本实现在iOS,android,小程序等多端实现一套代码复用,但是目前尚未开源,所以我先借用weex作为跨多端的技术实现以及vue作为dsl,如果你的团队也是采用类weex技术方案,那么你可以直接复用我的代码。

对于生成多端骨架屏的问题,我的解决方案是 skeleton-weex-plugin ,它是 skeleton-webpack-plugin 的一个插件。

如前所述,skeleton-webpack-plugin可以生成对应页面骨架屏的html与css,那么进一步思考,如果我们可以将这份html与css转化成weex的代码,这样就可以实现在一套骨架屏在多端都可以呈现。 skeleton-weex-plugin 的实现思路如下图所示:

自动生成跨多端骨架屏

它会在你对应的页面目录下生成一个skeleton.vue的文件,如下所示:

<template>
<div v-if="isShow" class="skeleton-wrapper">
<div>skeleton content</div>
</div>
</template>
<script>
export default {
  name: "Skeleton",
  props: {
    isShow: {
      type: Boolean,
      default: false
    }
  }
}
</script>
<style scoped>
skeleton style content
</style>
复制代码

这样你就可以把它当成组件来引用,并控制它的显示和隐藏。可以来看下小桔养车首页转化出来的一个效果图:

自动生成跨多端骨架屏

可以说相似度还是比较高的。这样似乎可以坐下来喝杯红酒了:

自动生成跨多端骨架屏

但是这样就完美了么?

后续的优化之路

虽然我们初步达成了预期的实现目标,但是还存在几个比较重要的问题。

  • h5页面还是会有白屏时间,因为这种方式在js bundle加载完成前还是展示的空白页。

    这个问题的解决思路是你可以将骨架屏的html与css直接打到静态的页面模版html上,然后在js bundle加载完成后删除该节点

  • 引入的骨架屏组件会导致js bundle体积增大。

    目前我在生成weex代码过程中已经做了很多的精简工作,比如只生成在viewport可见区域内元素的骨架屏,删除一些不必要的样式等,后续也会看看是否还有可以继续精简的代码。

  • native端渲染时在页面 js bundle加载完成前页面也会是白屏。

    这个问题的解决思路是可以用骨架屏的预览页截屏生成一张图片,然后native端在js bundle加载完成前展示这张图片即可填充白屏时间。

所以,我们还能也必须可以做的更好

自动生成跨多端骨架屏

这里是利用weex实现了跨多端的诉求,但是如果要拓展到其他技术栈其实本质思想也是一样,只需要将骨架屏的html与css抽象语法树转化成对应技术栈的实现即可,即使生成纯native的代码也并非不能做到,欢迎大家去贡献插件。


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

利用Python进行数据分析 原书第2版

利用Python进行数据分析 原书第2版

Wes McKinney / 徐敬一 / 机械工业出版社 / 2018-7 / 119

本书由Python pandas项目创始人Wes McKinney亲笔撰写,详细介绍利用Python进行操作、处理、清洗和规整数据等方面的具体细节和基本要点。第2版针对Python 3.6进行全面修订和更新,涵盖新版的pandas、NumPy、IPython和Jupyter,并增加大量实际案例,可以帮助你高效解决一系列数据分析问题。 第2版中的主要更新包括: • 所有的代码,包括把Py......一起来看看 《利用Python进行数据分析 原书第2版》 这本书的介绍吧!

CSS 压缩/解压工具
CSS 压缩/解压工具

在线压缩/解压 CSS 代码

MD5 加密
MD5 加密

MD5 加密工具

html转js在线工具
html转js在线工具

html转js在线工具