mui预加载

Posted 2021-01-06 bonly-ge

预加载

页面正常打开步骤：先创建 -> 在显示

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默认先显示等待框