目前網(wǎng)頁沒有使用任何特效，直接瀏覽器訪問并不覺得難看昵骤，不過 App 首頁也是用 WebView 加載網(wǎng)頁，載入之前空白肯适，載入后直接顯示变秦，就很簡陋。被催了好幾天之后決定解決這個(gè)問題框舔。
從時(shí)間序上蹦玫，整個(gè)載入過程分為三個(gè)階段
- WebView 訪問網(wǎng)頁到網(wǎng)頁返回
- 網(wǎng)頁返回到內(nèi)容返回
- 網(wǎng)頁內(nèi)容出現(xiàn)
其中網(wǎng)頁能控制的是其中的2和3。找了下主流方案刘绣，選用了 animsition樱溉。demo 效果很酷炫，不過用到我們網(wǎng)站里遇到了大問題纬凤。在目標(biāo)頁面接入 animsition 后福贞，頁面一直處于 loading 狀態(tài)無法正常顯示。
debug 后發(fā)現(xiàn)該庫實(shí)現(xiàn)原理是直接先用 css 透明化目標(biāo)區(qū)域內(nèi)容
.animsition,
.animsition-overlay {
position: relative;
opacity: 0;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
然后在 js 中顯示 loading 效果
if(options.loading) __.addLoading.call(this, options);
注冊(cè) load 事件
$window.on('load.' + namespace + ' pageshow.' + namespace, function() {
if(__.settings.timer) clearTimeout(__.settings.timer);
__.in.call(_this);
});
等 load 事件觸發(fā)后移除 loading 效果
if(options.loading) __.removeLoading.call(_this);
顯示目標(biāo)內(nèi)容
$this
.removeClass(inClass)
.css({ 'opacity' : 1 })
.trigger(__.settings.events.inEnd);
而我們網(wǎng)站目前的 requireJS 架構(gòu)直接等 load 好了之后才會(huì)執(zhí)行頁面 js停士，所以無法收到事件挖帘，出現(xiàn)無盡 loading 的假象。
這和 github 上另一個(gè)人的問題如出一轍 恋技，最奇葩的是作者 close 了這個(gè) issue拇舀，但問題仍然完全沒被解決 orz
只能自己處理。蜻底。
- 嘗試修改既有框架骄崩，試圖將 js 執(zhí)行的時(shí)機(jī)提前，未果。
- 打算按照 github 上的方案自己修改刁赖，又想使用第三方 CDN搁痛。
- 發(fā)現(xiàn)有個(gè) trick 可以將 timeout 設(shè)為0，果然完美實(shí)現(xiàn)頁面效果宇弛。
雖然只完成了階段3的部分鸡典，不過效果實(shí)在酷炫到簡直可以忘掉之前兩個(gè)白屏的階段 XD
不過問題畢竟不能無視，初步計(jì)劃未來做 pull to refresh 時(shí)順便將內(nèi)容全改為 ajax 方式獲取枪芒。這樣階段1的時(shí)間會(huì)被縮短彻况，階段2的事件也可以接收處理，體驗(yàn)應(yīng)該會(huì)更好舅踪。
有考慮過WebView自己在調(diào)用時(shí)顯示 loading纽甘，不過考慮版本升級(jí)等原因，和網(wǎng)頁的效果可能不一致抽碌，暫時(shí)先不處理悍赢。
