炫意html5
最早CSS3和HTML5移动技术网站之一

hello mui中的无等待窗体切换是如何实现的

从mui v0.7.0版本开始,hello mui示例App的窗体切换性能大幅提升,点击一个链接,不显示雪花等待框,立即打开一个“正在加载…”的页面,之后真实内容快速填充“正在加载…”区域;本文详细讲解如何实现这种窗体切换效果。
整体思路:
1、预加载一个模板父页面(template.html)和共用子页面;
2、点击列表链接时,直接显示模板父页面,并动态修改模板父页面的标题;
3、共用子页面通过loadURL方法加载对应目标页面;

步骤分解:
list.html页面中预加载模板父页面和共用子页面,为了提高效率,共用子页面默认加载了主列表中的第一项(accordion.html),代码如下:

//预加载模板父页面
var template = mui.preload({
url:'examples/template.html',
id:'demoTemplate',
styles:{
popGesture:"hide"
}
});
//预加载共用子页面
var subWebview = mui.preload({
url:'examples/accordion.html',
id:'template_sub',
styles:{
top: '48px',
bottom: '0px'
}
});

点击列表项时,立即显示模板父页面,改变模板父页面标题,共用子页面加载对应的目标页面,代码如下:

var title = this.innerText;
template.evalJS("with(document.getElementById('title')){innerHTML='" + title + "';className='mui-title mui-fadein';};");
if(subWebview.getURL()==this.href){
subWebview.show();
}else{
subWebview.loadURL(this.href);
}
template.show('slide-in-right', 150);

共用子页面默认隐藏,等加载新内容完毕后,再显示出来,代码如下:

subWebview.addEventListener('loaded', function() {
setTimeout(function(){
subWebview.show();
},50);
});

新页面按下返回按钮后,隐藏模板父页面,并在窗体动画结束后,隐藏共用子页面,代码(App.js)如下:

getTemplateWebview().hide('auto');
setTimeout(function() {
document.getElementById("title").className = 'mui-title mui-fadeout';
getSubWebview().hide("none");
}, 200);

如上方案的优点:
1、模板父页面预加载,点击后立即显示,不用展示雪花等待框,也不会出现白屏现象;
2、共用子页面,有效控制webview数量,避免切页时频繁创建、销毁webview;

回答

炫意HTML5 » hello mui中的无等待窗体切换是如何实现的

CSS3教程HTML5教程