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

資訊專欄INFORMATION COLUMN

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

tabalt / 1115人閱讀

摘要：之所以看起來很，除了自身慢的問題還有因?yàn)樗邆淞艘恍┆?dú)有的特性，比如鏈接跳轉(zhuǎn)，物理像素，不能獲取軟鍵盤高度等具有特色的問題。

WEB 之所以看起來很 WEB，除了自身慢的問題還有因?yàn)樗邆淞艘恍┆?dú)有的特性，比如鏈接跳轉(zhuǎn)，物理像素，不能獲取軟鍵盤高度等具有 WEB 特色的問題。

而今天我想講一點(diǎn)大家都不在意的一個(gè)問題，圖片流式加載的問題

我們先來看一個(gè)短片：

很明顯我們能看出問題所在，這個(gè)仿 iOS 桌面程序的背景加載非常具有 WEB 特色，雖然在某些場景來說這是一個(gè)優(yōu)點(diǎn)，比如傳統(tǒng)網(wǎng)頁上，但對于一個(gè)應(yīng)用級產(chǎn)品（對于如此般挑剔的我來說）這樣的體驗(yàn)還是難以接受的

那么我們就上手改造吧，先把改造后的效果 po 出來：

對于這樣的效果很多同學(xué)都能拿出各種的方案，如果今天我們只是討論傳統(tǒng)方案就沒意思了，我們看一下 IOING 中的實(shí)現(xiàn)方法是怎樣的，然后分析一下它是如何做到的。
傳送門：IOING 的相關(guān)文檔

這里給出兩段 CSS 示例：

/*片段 1*/
.bg {
    background: #fff onload url(./bg.png) center no-repeat;
}

我們仔細(xì)看一下后發(fā)現(xiàn)，這個(gè)語法中多了一個(gè) onload 的屬性，這個(gè)定義就是表示后面 url 中的背景圖在載入完成后才會進(jìn)行展示

上面這兩段 CSS 示例中第二個(gè)示例的解決方案還是比較好梳理的，在 IOING 中模版文件會被解析成虛擬 DOM 樹，在這解析過程中會把 style 屬性的內(nèi)容丟給 IOING 內(nèi)置的 CSS 引擎來處理，而第一段的 CSS 則沒有明確關(guān)聯(lián)的 DOM 節(jié)點(diǎn)，但沒關(guān)系，我們可以分為兩個(gè)邏輯段分別處理

先來看一下片段 2 的解決流程

語法分析，把設(shè)定‘onload’屬性的節(jié)點(diǎn)的背景圖設(shè)置為空

把該背景圖放置在沙盒中加載

圖片加載完成后把該節(jié)點(diǎn)的背景圖重新設(shè)置回來

其實(shí)原理比較簡單，重點(diǎn)是如何把 CSS 與 DOM 節(jié)點(diǎn)關(guān)聯(lián)起來，顯然第一段的實(shí)現(xiàn)就難在這個(gè)問題上，由于 CSS 在解析時(shí) IOING 的內(nèi)置引擎是知道該 CSS 的來源的，比如是模塊 CSS 或者是組件 CSS，這樣我們就可以首先定位到所作用的 DOM Tree

找到 CSS 的來源模塊（在 IOING 中功能頁面都是按模塊來開發(fā)的）

CSS 對應(yīng)的節(jié)點(diǎn)是否在 Shadow-root 中

以上都確定后就可以找到對應(yīng) DOM Tree 的根節(jié)點(diǎn)了

在每一個(gè) DOM Tree 節(jié)點(diǎn)插入文檔前設(shè)定一個(gè)‘end’事件

CSS 引擎接收到 ‘end’ 事件時(shí)在對應(yīng)的 DOM Tree 中查找匹配的節(jié)點(diǎn)

找到匹配節(jié)點(diǎn)后將節(jié)點(diǎn)的 background-image 設(shè)為 ‘none’

監(jiān)聽背景圖‘load’事件，加載成功后將節(jié)點(diǎn)的 background-image 設(shè)為 ‘’

到這里基本就完成了使用 CSS 語法定義背景圖的渲染方式了，原理其實(shí)并不復(fù)雜，對于不了解 IOING 的 DOM 引擎 和 CSS 引擎 的同學(xué)看到這里可能還是不太會明白。不過沒關(guān)系，接下來我會在這里不定期更新關(guān)于 IOING 的種種，包括大家最關(guān)心的如何把 WEB App 做成 Native 的體驗(yàn)

附上一個(gè)用 IOING 半天開發(fā)的小demo

傳送門：IOING 仿ios界面

掃碼二維碼關(guān)注我的公眾號

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/112417.html

相關(guān)文章

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

    摘要：之所以看起來很，除了自身慢的問題還有因?yàn)樗邆淞艘恍┆?dú)有的特性，比如鏈接跳轉(zhuǎn)，物理像素，不能獲取軟鍵盤高度等具有特色的問題。 WEB 之所以看起來很 WEB，除了自身慢的問題還有因?yàn)樗邆淞艘恍┆?dú)有的特性，比如鏈接跳轉(zhuǎn)，物理像素，不能獲取軟鍵盤高度等具有 WEB 特色的問題。 而今天我想講一點(diǎn)大家都不在意的一個(gè)問題，圖片流式加載的問題 我們先來看一個(gè)短片： showImg(https:...

    lmxdawn 評論0 收藏0

  • 如何設(shè)計(jì) Web App 應(yīng)用架構(gòu)？「兩分鐘了解 IOING」

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

    Eidesen 評論0 收藏0

  • 如何設(shè)計(jì) Web App 應(yīng)用架構(gòu)？「兩分鐘了解 IOING」

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

    marek 評論0 收藏0

發(fā)表評論

0條評論

最新活動(dòng)
閱讀需要支付1元查看
<