摘要：之所以看起来很，除了自身慢的问题还有因为它具备了一些独有的特性，比如链接跳转，物理像素，不能获取软键盘高度等具有特色的问题。
WEB 之所以看起来很 WEB，除了自身慢的问题还有因为它具备了一些独有的特性，比如链接跳转，物理像素，不能获取软键盘高度等具有 WEB 特色的问题。
而今天我想讲一点大家都不在意的一个问题，图片流式加载的问题
我们先来看一个短片：
很明显我们能看出问题所在，这个仿 iOS 桌面程序的背景加载非常具有 WEB 特色，虽然在某些场景来说这是一个优点，比如传统网页上，但对于一个应用级产品（对于如此般挑剔的我来说）这样的体验还是难以接受的
那么我们就上手改造吧，先把改造后的效果 po 出来：
对于这样的效果很多同学都能拿出各种的方案，如果今天我们只是讨论传统方案就没意思了，我们看一下 IOING 中的实现方法是怎样的，然后分析一下它是如何做到的。
传送门：IOING 的相关文档
这里给出两段 CSS 示例：
/*片段 1*/
.bg {
background: #fff onload url(./bg.png) center no-repeat;
}
我们仔细看一下后发现，这个语法中多了一个 onload 的属性，这个定义就是表示后面 url 中的背景图在载入完成后才会进行展示
上面这两段 CSS 示例中第二个示例的解决方案还是比较好梳理的，在 IOING 中模版文件会被解析成虚拟 DOM 树，在这解析过程中会把 style 属性的内容丢给 IOING 内置的 CSS 引擎来处理，而第一段的 CSS 则没有明确关联的 DOM 节点，但没关系，我们可以分为两个逻辑段分别处理
先来看一下片段 2 的解决流程
语法分析，把设定‘onload’属性的节点的背景图设置为空
把该背景图放置在沙盒中加载
图片加载完成后把该节点的背景图重新设置回来
其实原理比较简单，重点是如何把 CSS 与 DOM 节点关联起来，显然第一段的实现就难在这个问题上，由于 CSS 在解析时 IOING 的内置引擎是知道该 CSS 的来源的，比如是模块 CSS 或者是组件 CSS，这样我们就可以首先定位到所作用的 DOM Tree
找到 CSS 的来源模块（在 IOING 中功能页面都是按模块来开发的）
CSS 对应的节点是否在 Shadow-root 中
以上都确定后就可以找到对应 DOM Tree 的根节点了
在每一个 DOM Tree 节点插入文档前设定一个‘end’事件
CSS 引擎接收到 ‘end’ 事件时在对应的 DOM Tree 中查找匹配的节点
找到匹配节点后将节点的 background-image 设为 ‘none’
监听背景图‘load’事件，加载成功后将节点的 background-image 设为 ‘’
到这里基本就完成了使用 CSS 语法定义背景图的渲染方式了，原理其实并不复杂，对于不了解 IOING 的 DOM 引擎 和 CSS 引擎 的同学看到这里可能还是不太会明白。不过没关系，接下来我会在这里不定期更新关于 IOING 的种种，包括大家最关心的如何把 WEB App 做成 Native 的体验
附上一个用 IOING 半天开发的小demo
传送门：IOING 仿ios界面
扫码二维码关注我的公众号
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/112417.html
摘要：之所以看起来很，除了自身慢的问题还有因为它具备了一些独有的特性，比如链接跳转，物理像素，不能获取软键盘高度等具有特色的问题。 WEB 之所以看起来很 WEB，除了自身慢的问题还有因为它具备了一些独有的特性，比如链接跳转，物理像素，不能获取软键盘高度等具有 WEB 特色的问题。 而今天我想讲一点大家都不在意的一个问题，图片流式加载的问题 我们先来看一个短片： showImg(https:...
摘要：为使浏览器载入大量模块时不会造成内存占用过高，浏览器应能使被移除后的模块能被完全释放。浏览器应使模块运行在独立空间中，以保证模块自身错误时不至于导致整个应用停止工作。 IOING 在做些什么？ IOING 在你的代码和浏览器之间架设了一个中间解释层，该解释层提供了一套新的语法来填补浏览器所不具备的能力。 SPA 开发痛点 开发一个 SPA 应用的痛点是不同模块页面的状态保存，当从一个页...
摘要：为使浏览器载入大量模块时不会造成内存占用过高，浏览器应能使被移除后的模块能被完全释放。浏览器应使模块运行在独立空间中，以保证模块自身错误时不至于导致整个应用停止工作。 IOING 在做些什么？ IOING 在你的代码和浏览器之间架设了一个中间解释层，该解释层提供了一套新的语法来填补浏览器所不具备的能力。 SPA 开发痛点 开发一个 SPA 应用的痛点是不同模块页面的状态保存，当从一个页...
阅读 1230·2021-09-26 09:46
阅读 1584·2021-09-06 15:00
阅读 715·2019-08-30 15:52
阅读 1119·2019-08-29 13:10
阅读 1280·2019-08-26 13:47
阅读 1480·2019-08-26 13:35
阅读 2028·2019-08-23 18:38
阅读 722·2019-08-23 17:59
