目前網(wǎng)頁沒有使用任何特效，直接瀏覽器訪問并不覺得難看，不過 App 首頁也是用 WebView 加載網(wǎng)頁，載入之前空白，載入后直接顯示，就很簡陋。被催了好幾天之后決定解決這個問題。
從時間序上，整個載入過程分為三個階段
- 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)該庫實現(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);
注冊 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 好了之后才會執(zhí)行頁面 js，所以無法收到事件，出現(xiàn)無盡 loading 的假象。
這和 github 上另一個人的問題如出一轍 ，最奇葩的是作者 close 了這個 issue，但問題仍然完全沒被解決 orz
只能自己處理。。
- 嘗試修改既有框架，試圖將 js 執(zhí)行的時機(jī)提前，未果。
- 打算按照 github 上的方案自己修改，又想使用第三方 CDN。
- 發(fā)現(xiàn)有個 trick 可以將 timeout 設(shè)為0，果然完美實現(xiàn)頁面效果。
雖然只完成了階段3的部分，不過效果實在酷炫到簡直可以忘掉之前兩個白屏的階段 XD
不過問題畢竟不能無視，初步計劃未來做 pull to refresh 時順便將內(nèi)容全改為 ajax 方式獲取。這樣階段1的時間會被縮短，階段2的事件也可以接收處理，體驗應(yīng)該會更好。
有考慮過WebView自己在調(diào)用時顯示 loading，不過考慮版本升級等原因，和網(wǎng)頁的效果可能不一致，暫時先不處理。
