<h3>一唯鸭、頁(yè)面呈現(xiàn)之前出現(xiàn)空白頁(yè)面 </h3>
使用html頁(yè)面肯定要考慮加載速度的問(wèn)題梳玫,當(dāng)我們部署上頁(yè)面后發(fā)現(xiàn)职烧,每次進(jìn)入都會(huì)有短暫的空白頁(yè)面出現(xiàn)。這是在使用UIWebview時(shí)一定會(huì)出現(xiàn)的現(xiàn)象。
解決這一問(wèn)題的方法有兩種俱笛,一種是添加類似于正在加載的狀態(tài)框,或是動(dòng)畫(huà),來(lái)提高體驗(yàn)度汰瘫。其次是使用一張與頁(yè)面一模一樣的圖片,先讓他添加到當(dāng)前的view上擂煞,并在頁(yè)面加載完成后remove該圖片混弥。所以你必須準(zhǔn)備4張不同尺寸的圖片,并且可能經(jīng)常需要替換這4張圖片颈娜。雖然麻煩剑逃,但給用戶的感覺(jué)相對(duì)更好一些。(此處有坑)
如果頁(yè)面長(zhǎng)時(shí)間沒(méi)有加載出官辽,這就意味著用戶即將點(diǎn)擊的頁(yè)面可能就是那張圖片蛹磺,后果可想而知。而且我們不能保證服務(wù)器一定不會(huì)抽風(fēng)同仆。所以又想了另一個(gè)法子萤捆,給app本地留一個(gè)頁(yè)面,與遠(yuǎn)程頁(yè)面保持一致。此時(shí)你需要把所有頁(yè)面上的所有資源拷到app中俗或,并讓他先加載本地的頁(yè)面市怎,再加載遠(yuǎn)程的頁(yè)面。都一樣了辛慰,為什么還要加載遠(yuǎn)程区匠,不加載遠(yuǎn)程,我還弄html頁(yè)面作甚帅腌?
所以此時(shí)的加載順序是:圖片->本地頁(yè)面->遠(yuǎn)程頁(yè)面驰弄。頁(yè)面肯定會(huì)有刷新的感覺(jué),這是目前沒(méi)法避免的一個(gè)體驗(yàn)度上的問(wèn)題速客。加載時(shí)機(jī)也同樣重要戚篙,遠(yuǎn)程頁(yè)面必須在本地頁(yè)面加載完成后才能開(kāi)始加載。在Cordova中溺职,頁(yè)面開(kāi)始加載以及加載完成都會(huì)發(fā)出一個(gè)通知岔擂,我們可以監(jiān)聽(tīng)這個(gè)通知,并通過(guò)判斷當(dāng)前視圖來(lái)確定本地頁(yè)面是否已加載完成浪耘。
NSNotificationCenter *center = [NSNotificationCenter defaultCenter];
[center addObserver:self
selector:@selector(onNotification:)
name:CDVPluginResetNotification // 開(kāi)始加載
object:nil];
[center addObserver:self
selector:@selector(onNotification:)
name:CDVPageDidLoadNotification // 加載完成
object:nil];
<h3>二乱灵、多Cordova頁(yè)面加載時(shí)出現(xiàn)延遲假象</h3>
假設(shè)A和B兩個(gè)視圖,從A可以push出B点待,且A和B都繼承CDVViewController阔蛉,也就是這兩個(gè)視圖都會(huì)加載網(wǎng)頁(yè)。你會(huì)發(fā)現(xiàn)很尷尬的情況癞埠,當(dāng)推出B的時(shí)候状原,B很長(zhǎng)時(shí)間都是空白,即便B先加載本地苗踪,也是如此颠区,所以和網(wǎng)速?zèng)]有關(guān)系。
在日志中你發(fā)現(xiàn)會(huì)有類似Gave lock 3的文字通铲,什么鬼毕莱?!細(xì)究后才發(fā)現(xiàn)颅夺,原來(lái)是Cordova有一個(gè)鎖的機(jī)制朋截,當(dāng)A頁(yè)面還未完全加載時(shí),哪怕你已經(jīng)推出B視圖吧黄,他還是會(huì)等A加載完成后才會(huì)去加載B部服。至于為什么要加這個(gè)鎖還得認(rèn)真看下源碼,但可以確定的是我們不能隨便去除掉這個(gè)鎖機(jī)制拗慨,因?yàn)檫@個(gè)特性是在Cordova版本升級(jí)時(shí)刻意做的優(yōu)化廓八,在不了解的情況下奉芦,不動(dòng)為好。只能繼續(xù)填坑剧蹂。
我們A頁(yè)面包含本地頁(yè)面A1和遠(yuǎn)程頁(yè)面A2声功,遠(yuǎn)程頁(yè)面是收到本地頁(yè)面加載完成后才去加載的,所以不會(huì)出現(xiàn)鎖的問(wèn)題宠叼。但是B視圖不能夠根據(jù)接收通知來(lái)決定加載與否先巴。解決辦法是 只要讓A1和A2盡快加載完成。加載是一回事冒冬,刷新是另外一回事筹裕。只要加載完成,隨后做刷新已經(jīng)不會(huì)影響其他頁(yè)面加載了窄驹。那么我們讓A1和A2先加載一個(gè)名為index.html的空白頁(yè)面,再刷新為實(shí)際加載的頁(yè)面证逻,這樣B視圖的加載已經(jīng)看不到延遲了乐埠。
此時(shí)又得解決刷新的問(wèn)題了,UIWebView直接更改url并reload是沒(méi)有用的囚企。必須聲明一個(gè)NSURLRequest丈咐,并重新loadRequest。刷新時(shí)的url必須是符合Cordova規(guī)則的url龙宏。在Cordova源碼中有一個(gè)appUrl的方法棵逊,通過(guò)這個(gè)方法轉(zhuǎn)出的url才能被CDVViewController正常加載。代碼:
localWebVC.wwwFolderName = @"www";
localWebVC.startPage = @"local.html";
NSURL *url = [self.localWebVC performSelector:@selector(appUrl)];
if (url)
{
NSURLRequest *request = [[NSURLRequest alloc] initWithURL:url];
[self.localWebVC.webView loadRequest:request];
}
以上是使用Cordova時(shí)银酗,對(duì)頁(yè)面加載問(wèn)題的一些總結(jié)辆影,期待大家分享更完美的方案。