讓 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界面

---

掃碼二維碼關注個人公衆號