最近在做一個(gè)微信端的小項(xiàng)目,前端代碼寫完后,就放在手機(jī)端測試,沒什么問題,但是頁面在加載和渲染時(shí)的效果卻讓人有些不爽,雖然是個(gè)小項(xiàng)目,我大可不必做這些,但是看著頁面的閃動(dòng),就忍不住想做些什么。

先說說問題吧:

電腦培訓(xùn),計(jì)算機(jī)培訓(xùn),平面設(shè)計(jì)培訓(xùn),網(wǎng)頁設(shè)計(jì)培訓(xùn),美工培訓(xùn),Web培訓(xùn),Web前端開發(fā)培訓(xùn)     

上面是首頁效果圖,其實(shí)在最開始的時(shí)候并沒有考慮web端,這圖是給IOS和安卓native App用的。為了方面兩個(gè)本地APP的開發(fā),所以上面的圖中,除了那幾個(gè)科目和下面的tabBar,其余都是圖片。

因?yàn)槎际菆D片,所以布局真的是挺簡單,但是問題也隨之來了,幾張圖片都是通過img標(biāo)簽的src屬性去請(qǐng)求的,所以在刷新或者跳轉(zhuǎn)的時(shí)候,會(huì)有明顯的空白閃動(dòng)。

因?yàn)槊繌垐D片都會(huì)有請(qǐng)求,這樣就會(huì)有排隊(duì)等候的時(shí)間,獲取到圖片后再渲染繪制,這樣就造成了頁面每個(gè)圖片區(qū)域都會(huì)有短暫的空白閃動(dòng)。

我的解決方法則是通過base64,可以比較下兩者的network情況:

1.請(qǐng)求時(shí)間比較

1.首次加載無緩存

電腦培訓(xùn),計(jì)算機(jī)培訓(xùn),平面設(shè)計(jì)培訓(xùn),網(wǎng)頁設(shè)計(jì)培訓(xùn),美工培訓(xùn),Web培訓(xùn),Web前端開發(fā)培訓(xùn)

(圖片通過請(qǐng)求獲取的情況)

網(wǎng)友評(píng)論