iOS下Cordova页面加载问题

<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时,对页面加载问题的一些总结,期待大家分享更完美的方案。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 151,829评论 1 331
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 64,603评论 1 273
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 101,846评论 0 226
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 42,600评论 0 191
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 50,780评论 3 272
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 39,695评论 1 192
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,136评论 2 293
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,862评论 0 182
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,453评论 0 229
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,942评论 2 233
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,347评论 1 242
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,790评论 2 236
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,293评论 3 221
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,839评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,448评论 0 181
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 34,564评论 2 249
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 34,623评论 2 249

推荐阅读更多精彩内容

  • 1,今天回来跟娃讲了,早上吃的牛肉面,和中午丁香排骨的样子和口味,娃也提了幼儿园中午吃的,而且自从我说了中午吃饭后...
    酒低三分阅读 194评论 1 0
  • 2017/10/17【能量世界1040天】 豆丁公寓 意想不到,我们五个人又一起倒下了。 在做菜的过程中,我就感到...
    陈艳霞小树妈阅读 179评论 0 2
  • 一.要点 1.final关键字可以用于成员变量、本地变量、方法以及类。2.final成员变量必须在声明的时候初始化...
    ClawHub的技术分享阅读 81评论 0 0
  • 现在经常听到这句话,“有能力的话就要送孩子到美国念书,这样对孩子的未来比较好”,为什么呢?在1900~20...
    zongguoyong阅读 195评论 0 0