让CSS完成背景图片，背景图片加载完成后显示，IOING的onloadurl
时间：2023-03-31 12:59:21
CSS
WEB的原理看起来很WEB，除了自身慢的问题外，还有一些独特的地方，比如链接跳转，物理像素，无法获取软键盘高度等问题网络特性。但是今天我想说一个大家都不关心的问题。让我们看一个关于图像流加载问题的简短视频：显然我们可以看到问题。这个仿iOS桌面程序的后台加载是有WEB特性的，虽然这在某些场景下是优势，比如在传统网页上，但是对于一个应用级的产品（对于挑剔的我来说），这样的体验还是可以的不可接受的。效果po出来：对于这样的效果，很多同学都能想出各种方案。如果我们今天只讨论传统的解决方案，那会很无聊。我们先看看IOING中的实现方法，然后分析它是如何完成的。传送门：IOING的相关文档在这里给出了两个CSS示例：/*fragment1*/.bg{background:#fffonloadurl(./bg.png)centerno-repeat;}
仔细一看，我们发现这个语法中多了一个onload属性。这个定义意味着下面的url中的背景图片会在加载完成后显示出来。上面两个CSS例子中的第二个例子的解决方法比较容易梳理。在IOING中，模板文件将被解析为虚拟DOM树。在解析过程中会将style属性的内容丢给IOING内置的CSS引擎进行处理，而CSS的第一段并没有明确关联的DOM节点，不过没关系，我们可以将其分成两段logicalsegments并分别处理我们先看一下segment2求解过程的语法分析，将设置'onload'属性的节点的背景图片设置为空，将背景图片放入沙箱中，加载图片，并在加载图像后重置节点的背景图像。其实原理比较简单，重点是如何将CSS与DOM节点关联起来？显然，在这个问题上第一段的实现是有难度的，因为IOING内置的引擎在解析CSS的时候知道CSS的来源，比如moduleCSS或者componentCSS，所以我们可以先定位workingDOMTree来找到CSS的源码模块（在IOING中，功能页面是按模块开发的）。以上都确定后，就可以查到CSS对应的节点是否在Shadow-root中了。根节点是在每个DOM树节点被插入到文档之前设置的。设置了“结束”事件。当CSS引擎接收到'end'事件时，它会在对应的DOMTree中搜索匹配的节点，找到匹配的节点后设置该节点的background-image。监听背景图片的'load'事件为'none'，加载成功后设置节点的background-image为''，基本完成背景图片使用CSS语法定义的渲染方法，原理其实并不复杂，对于不同了解IOING的DOM引擎和CSS引擎的同学可能还是不太了解。不过没关系，我会不定时在这里更新IOING的各种资料，包括大家最关心的如何把WEBApp做成Native的经验。附上半天用IOING开发的小demo传送门：IOING仿ios界面扫码二维码关注我公众号
