预加载
页面正常打开步骤:先创建 -> 在显示
plus.webview.create( url, id, styles, extras ); // 创建页面
plus.webview.show( id_wvobj, aniShow, duration, showedCB, extras ); // 显示已经创建的或者隐藏的窗口
plus.webview.open( url, id, styles, aniShow, duration, showedCB ); // 创建并打开
问题:在创建打开页面时,比较费时,会出现等待框,影响用户体验,所以用到预加载技术
预加载是在页面还没用到的时候提前创建,当用到的时候直接显示,节约时间,mui提供了两种预加载的方式
mui.init异步加载多个页面
mui.init({
preloadPages:[
{
url:prelaod-page-url,
id:preload-page-id,
styles:{},//窗口参数
extras:{},//自定义扩展参数
subpages:[{},{}]//预加载页面的子页面
}
],
preloadLimit:5//预加载窗口数量限制(一旦超出,先进先出)默认不限制
});
问题:因为是异步执行,所以可能会出现无法立即得到webview对象,如下
mui.init({
preloadPages:[
{
url:‘list.html‘,
id:‘list‘
}
]
});
var list = plus.webview.getWebviewByid(‘list‘);//这里可能返回空;
mui.preload 同步立即返回webview对象,加载1个页面
var page = mui.preload({
url:new-page-url,
id:new-page-id,//默认使用当前页面的url作为id
styles:{},//窗口参数
extras:{}//自定义扩展参数
});
判断预加载是否成功
方式1在父页面通过如下代码获取当前所有的webview对象,通过if判断是否预加载进来
mui.plusReady(function(){
setTimeout(function(){
var array = plus.webview.all();
if(array){
for(var i=0,len=array.length;i<len;i++){
console.log(array[i].getURL());
}
}
},5000)
});
方式2,通过观察预加载页面打开时没有等待框,mui.openWindow默认先显示等待框
原文地址:https://www.cnblogs.com/bonly-ge/p/9645940.html
时间: 2024-09-30 16:51:00