所谓的预加载技术就是在用户尚未触发页面跳转时，提前创建目标页面，这样当用户跳转时，就可以立即进行页面切换，节省创建新页面的时间，提升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>

mui webview 预加载的更多相关文章

  1. Android WebView页面加载优化

    目前webapp越来越多,体验也越来越好,为了能够更好的使用WebView展示出流畅的的页面,可以从以下几点做优化: WebView缓存 资源文件本地存储 减少耗时操作 客户端UI优化 可能有人会说了 ...

  2. MUI - 预加载

    预加载都是在mui.init({)}中执行的 方式一:preload一次仅能预加载一个页面(除非循环) var subWebview = mui.preload({ url: 'examples/ac ...

  3. HBuilder mui 手机app开发 Android手机app开发 ios手机app开发 打开新页面 预加载页面 关闭页面

    创建子页面 在mobile app开发过程中,经常遇到卡头卡尾的页面,此时若使用局部滚动,在android手机上会出现滚动不流畅的问题: mui的解决思路是:将需要滚动的区域通过单独的webview实 ...

  4. mui预加载

    1.只能加载一个页面 mui.init(); var page = null; mui.plusReady(function() { //预加载页面mui.preload必须放在plusReady事件 ...

  5. mui点击加载，下拉刷新，上下整合代码

    mui点击加载,下拉刷新,上下整合代码 mui的是上拉加载,但是老大说要做成点击加载,所以就改了一些 代码应该是有些问题的,测到了大家就自己改下. 首先要说明的是,有下拉刷新的页面一定要是双webvi ...

  6. Android--------WebView+H5开发仿美团 预加载，加载失败和重新加载

    Android嵌入式开发已经占大多数了,很多界面都是以网页的形式展示,WebView可以使得网页轻松的内嵌到app里,还可以直接跟js相互调用. 本博客主要是模仿美团的旅游出行模块的预加载,网页加载失 ...

  7. React-Native WebView动态加载字体

    背景 使用react-native构建的iOS/Android双端APP,通过WebView加载本地页面,需要根据服务器提供的字体列表实现下载和动态加载. 本地字体检查 有些字体手机操作系统已经提供了 ...

  8. Javascript图片预加载详解

    预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...

  9. IIS初始化（预加载），解决第一次访问慢，程序池被回收问题

    你以为你可以慢,那是不可能的!你以为你可以不动,那也是不可能的! 河南是守株待兔故事情节的发源地,讲的是懒惰的农夫坐在树桩旁等待可爱的小毛兔撞树的故事,那么这种事情怎么可能天天出现呢!你以为的事并一定 ...

随机推荐

  1. part10 header界面渐隐渐显 //动态路由//项目动画

    两个组件只同时显示一个 可以用 a v-show='variable'  b: v-show='!variable' 1.对全局事件的解绑 //代码容易出现大量bug 因为影响其他组件 keep-al ...

  2. 使用代理IP访问网络

    现在很多领域都需要用到代理IP,用到的领域越来越广,如爬虫.投票.抢购等等. 代理IP免费获取地址:http://www.xicidaili.com/(少部分可以用) 我这个案例使用的上面地址里面的免 ...

  3. python导出oracle中的表内容，并生成excel文件

    export NLS_LANG=AMERICAN_AMERICA.ZHS16GBK; ### 如果oracle表中有中文输出,为防止乱码,执行脚本前,需要先制定字符集: #!/usr/bin/pyth ...

  4. JAVA多线程的基础

    线程与进程的区别 1.线程与进程 每个正在系统上运行的程序都是一个进程.每个进程包含一到多个线程.线程是一组指令的集合,或者是程序的特殊段,它可以在程序里独立执行.也可以把它理解为代码运行的上下文.所 ...

  5. VMware-Workstation-Full-12.5.9

    https://download3.vmware.com/software/wkst/file/VMware-Workstation-Full-12.5.9-7535481.x86_64.bundle ...

  6. 实验吧web-易-what a fuck!这是什么鬼东西?

    打开链接是一大串符号,是js编码的一种,全部复制下来,粘贴在控制台中回车就拿到flag了.

  7. centos rpm安装jdk1.8

    1.官网下载jdk的rpm文件(http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html) ...

  8. Java简单调用Lua

    package lua; import org.keplerproject.luajava.LuaState; import org.keplerproject.luajava.LuaStateFac ...

  9. 计算机utf-8/gbk/utf-16对照表

    GBK   UTF-16 UTF-8 ==================D2BB  4E00  E4 B8 80  一B6A1  4E01  E4 B8 81  丁C6DF  4E03  E4 B8 ...

  10. python3转义编码

    s = 'dy电影' print(s) # dy电影 print(type(s)) # <class 'str'> print(s.encode('utf-8')) # b'dy\xe7\ ...