所谓的预加载技术就是在用户尚未触发页面跳转时，提前创建目标页面，这样当用户跳转时，就可以立即进行页面切换，节省创建新页面的时间，提升app使用体验。mui提供两种方式实现页面预加载。


 


方式一：通过mui.init方法中的preloadPages参数进行配置 


mui.init({  // 可同时加载一个或者多个界面

    preloadPages:[ //加载一个界面

    {  
        url:'a.html',  
        id:'a',  
        styles:{},//窗口参数  
        extras:{},//自定义扩展参数

        subpages:[{},{}]//预加载页面的子页面  
    },{ // 可加载另外一个界面，不需要可直接删除

        url:'b.html',  
        id:'b',  
        styles:{},//窗口参数  
        extras:{},//自定义扩展参数

        subpages:[{},{}]//预加载页面的子页面  
    }

    ]

});

 



方式二：通过mui.preload方法预加载,一次只能预加载一个页面,若需加载多个webview，则需多次调用mui.preload()方法； 


mui.plusReady(function(){

    var productView = mui.preload({

        url: 'list.html',

        id: 'list',

    });

    console.log(productView); //获得预加载界面的对象

});

 

页面显示 

<!doctype html>

<html>


<head>

<meta charset="UTF-8">

<title></title>

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

<link href="css/mui.min.css" rel="stylesheet" />

</head>


<body>

<button type="button" id="btn_open">打开预加载的页面</button>

<script src="js/mui.min.js"></script>

<script type="text/javascript">

mui.init();

var page = null;

mui.plusReady(function() {

//预加载页面mui.preload必须放在plusReady事件中

page = mui.preload({

url: 'preload_sub.html',

id: 'preload_sub',

extras: {

name: 'durant'

}

});


})



document.getElementById("btn_open").addEventListener('tap', function() {

//预加载仅会提前创建webview，并不会默认打开，因此需要再使用mui.openWindow方法打开对应窗口，才会看到预加载效果。

if(page) {

//方法1：直接调用预加载页面对象page的show方法

//page.show();


//方法2：mui.openWindow

//mui.openWindow('preload_sub');//简写，通过ID打开指定页面

mui.openWindow({

url: 'preload_sub.html',

id: 'preload_sub'

}) //亦可写详细的参数


//方法3：getWebviewById(),通过ID找到webview，再调用show()方法 

//var wv = plus.webview.getWebviewById('preload_sub'); //请在plus ready后再调用plus api,不一定非得写在plusReady事件中

//console.log(page == wv) //true,page就是'preload_sub'所对应的webview

//wv.show();

}

})

</script>

</body>


</html>