首页 » 漏洞 » 让 CSS 完成背景图加载完毕后显示 之 解析 IOING 的 onload url 原理

让 CSS 完成背景图加载完毕后显示 之 解析 IOING 的 onload url 原理

 

WEB 之所以看起来很 WEB,除了自身慢的问题还有因为它具备了一些独有的特性,比如链接跳转,物理像素,不能获取软键盘高度等具有 WEB 特色的问题。

而今天我想讲一点大家都不在意的一个问题,图片流式加载的问题

我们先来看一个短片:

让 CSS 完成背景图加载完毕后显示 之 解析 IOING 的 onload url 原理

很明显我们能看出问题所在,这个仿 iOS 桌面程序的背景加载非常具有 WEB 特色,虽然在某些场景来说这是一个优点,比如传统网页上,但对于一个应用级产品(对于如此般挑剔的我来说)这样的体验还是难以接受的

那么我们就上手改造吧,先把改造后的效果 po 出来:

让 CSS 完成背景图加载完毕后显示 之 解析 IOING 的 onload url 原理

对于这样的效果很多同学都能拿出各种的方案,如果今天我们只是讨论传统方案就没意思了,我们看一下 IOING 中的实现方法是怎样的,然后分析一下它是如何做到的。

传送门:IOING 的相关文档

这里给出两段 CSS 示例:

/*片段 1*/ .bg {     background: #fff onload url(./bg.png) center no-repeat; }
<!--片段 2--> <div style="background-image: onload url(./bg.png);"></div>

我们仔细看一下后发现,这个语法中多了一个 onload 的属性,这个定义就是表示后面 url 中的背景图在载入完成后才会进行展示

上面这两段 CSS 示例中第二个示例的解决方案还是比较好梳理的,在 IOING 中模版文件会被解析成虚拟 DOM 树,在这解析过程中会把 style 属性的内容丢给 IOING 内置的 CSS 引擎来处理,而第一段的 CSS 则没有明确关联的 DOM 节点,但没关系,我们可以分为两个逻辑段分别处理

先来看一下 片段 2 的解决流程

  1. 语法分析,把设定‘onload’属性的节点的背景图设置为空

  2. 把该背景图放置在沙盒中加载

  3. 图片加载完成后把该节点的背景图重新设置回来

其实原理比较简单,重点是如何把 CSS 与 DOM 节点关联起来,显然第一段的实现就难在这个问题上,由于 CSS 在解析时 IOING 的内置引擎是知道该 CSS 的来源的,比如是模块 CSS 或者是组件 CSS,这样我们就可以首先定位到所作用的 DOM Tree

  1. 找到 CSS 的来源模块(在 IOING 中功能页面都是按模块来开发的)

  2. CSS 对应的节点是否在 Shadow-root 中

  3. 以上都确定后就可以找到对应 DOM Tree 的根节点了

  4. 在每一个 DOM Tree 节点插入文档前设定一个‘end’事件

  5. CSS 引擎接收到 ‘end’ 事件时在对应的 DOM Tree 中超找匹配的节点

  6. 找到匹配节点后将节点的 background-image 设为 ‘none’

  7. 监听背景图‘load’事件,加载成功后将节点的 background-image 设为 ‘’

到这里基本就完成了使用 CSS 语法定义背景图的渲染方式了,原理其实并不复杂,对于不了解 IOING 的 DOM 引擎 和 CSS 引擎 的同学看到这里可能还是不太会明白。不过没关系,接下来我会在这里不定期更新关于 IOING 的种种,包括大家最关心的如何把 WEB App 做成 Native 的体验

附上一个用 IOING 半天开发的小demo

IOING 仿ios界面

原文链接:让 CSS 完成背景图加载完毕后显示 之 解析 IOING 的 onload url 原理,转载请注明来源!

0