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

WEB 之因此看起来很 WEB，除了自身慢的问题还有由于它具有了一些独有的特性，好比连接跳转，物理像素，不能获取软键盘高度等具备 WEB 特点的问题。

而今天我想讲一点你们都不在乎的一个问题，图片流式加载的问题

咱们先来看一个短片：

很明显咱们能看出问题所在，这个仿 iOS 桌面程序的背景加载很是具备 WEB 特点，虽然在某些场景来讲这是一个优势，好比传统网页上，但对于一个应用级产品（对于如此般挑剔的我来讲）这样的体验仍是难以接受的

那么咱们就上手改造吧，先把改造后的效果 po 出来：

对于这样的效果不少同窗都能拿出各类的方案，若是今天咱们只是讨论传统方案就没意思了，咱们看一下 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界面

---

扫码二维码关注个人公众号