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；