<h3>一、页面呈现之前出现空白页面 </h3>
使用html页面肯定要考虑加载速度的问题,当我们部署上页面后发现,每次进入都会有短暂的空白页面出现。这是在使用UIWebview时一定会出现的现象。
解决这一问题的方法有两种,一种是添加类似于正在加载的状态框,或是动画,来提高体验度。其次是使用一张与页面一模一样的图片,先让他添加到当前的view上,并在页面加载完成后remove该图片。所以你必须准备4张不同尺寸的图片,并且可能经常需要替换这4张图片。虽然麻烦,但给用户的感觉相对更好一些。(此处有坑)
如果页面长时间没有加载出,这就意味着用户即将点击的页面可能就是那张图片,后果可想而知。而且我们不能保证服务器一定不会抽风。所以又想了另一个法子,给app本地留一个页面,与远程页面保持一致。此时你需要把所有页面上的所有资源拷到app中,并让他先加载本地的页面,再加载远程的页面。都一样了,为什么还要加载远程,不加载远程,我还弄html页面作甚?
所以此时的加载顺序是:图片->本地页面->远程页面。页面肯定会有刷新的感觉,这是目前没法避免的一个体验度上的问题。加载时机也同样重要,远程页面必须在本地页面加载完成后才能开始加载。在Cordova中,页面开始加载以及加载完成都会发出一个通知,我们可以监听这个通知,并通过判断当前视图来确定本地页面是否已加载完成。
NSNotificationCenter *center = [NSNotificationCenter defaultCenter];
[center addObserver:self
selector:@selector(onNotification:)
name:CDVPluginResetNotification // 开始加载
object:nil];
[center addObserver:self
selector:@selector(onNotification:)
name:CDVPageDidLoadNotification // 加载完成
object:nil];
<h3>二、多Cordova页面加载时出现延迟假象</h3>
假设A和B两个视图,从A可以push出B,且A和B都继承CDVViewController,也就是这两个视图都会加载网页。你会发现很尴尬的情况,当推出B的时候,B很长时间都是空白,即便B先加载本地,也是如此,所以和网速没有关系。
在日志中你发现会有类似Gave lock 3的文字,什么鬼?!细究后才发现,原来是Cordova有一个锁的机制,当A页面还未完全加载时,哪怕你已经推出B视图,他还是会等A加载完成后才会去加载B。至于为什么要加这个锁还得认真看下源码,但可以确定的是我们不能随便去除掉这个锁机制,因为这个特性是在Cordova版本升级时刻意做的优化,在不了解的情况下,不动为好。只能继续填坑。
我们A页面包含本地页面A1和远程页面A2,远程页面是收到本地页面加载完成后才去加载的,所以不会出现锁的问题。但是B视图不能够根据接收通知来决定加载与否。解决办法是 只要让A1和A2尽快加载完成。加载是一回事,刷新是另外一回事。只要加载完成,随后做刷新已经不会影响其他页面加载了。那么我们让A1和A2先加载一个名为index.html的空白页面,再刷新为实际加载的页面,这样B视图的加载已经看不到延迟了。
此时又得解决刷新的问题了,UIWebView直接更改url并reload是没有用的。必须声明一个NSURLRequest,并重新loadRequest。刷新时的url必须是符合Cordova规则的url。在Cordova源码中有一个appUrl的方法,通过这个方法转出的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时,对页面加载问题的一些总结,期待大家分享更完美的方案。