国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

讓 CSS 完成背景圖加載完畢后顯示 之 解析 IOING 的 onload url 原理

lmxdawn / 3502人閱讀

摘要：之所以看起來很，除了自身慢的問題還有因為它具備了一些獨有的特性，比如鏈接跳轉，物理像素，不能獲取軟鍵盤高度等具有特色的問題。

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

掃碼二維碼關注我的公眾號

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/87252.html

相關文章

  • 讓 CSS 完成背景圖加載完畢后顯示 之 解析 IOING 的 onload url 原理

    摘要：之所以看起來很，除了自身慢的問題還有因為它具備了一些獨有的特性，比如鏈接跳轉，物理像素，不能獲取軟鍵盤高度等具有特色的問題。 WEB 之所以看起來很 WEB，除了自身慢的問題還有因為它具備了一些獨有的特性，比如鏈接跳轉，物理像素，不能獲取軟鍵盤高度等具有 WEB 特色的問題。 而今天我想講一點大家都不在意的一個問題，圖片流式加載的問題 我們先來看一個短片： showImg(https:...

    tabalt 評論0 收藏0

  • 如何設計 Web App 應用架構？「兩分鐘了解 IOING」

    摘要：為使瀏覽器載入大量模塊時不會造成內存占用過高，瀏覽器應能使被移除后的模塊能被完全釋放。瀏覽器應使模塊運行在獨立空間中，以保證模塊自身錯誤時不至于導致整個應用停止工作。 IOING 在做些什么？ IOING 在你的代碼和瀏覽器之間架設了一個中間解釋層，該解釋層提供了一套新的語法來填補瀏覽器所不具備的能力。 SPA 開發痛點 開發一個 SPA 應用的痛點是不同模塊頁面的狀態保存，當從一個頁...

    Eidesen 評論0 收藏0

  • 如何設計 Web App 應用架構？「兩分鐘了解 IOING」

    摘要：為使瀏覽器載入大量模塊時不會造成內存占用過高，瀏覽器應能使被移除后的模塊能被完全釋放。瀏覽器應使模塊運行在獨立空間中，以保證模塊自身錯誤時不至于導致整個應用停止工作。 IOING 在做些什么？ IOING 在你的代碼和瀏覽器之間架設了一個中間解釋層，該解釋層提供了一套新的語法來填補瀏覽器所不具備的能力。 SPA 開發痛點 開發一個 SPA 應用的痛點是不同模塊頁面的狀態保存，當從一個頁...

    marek 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<