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

    为什么要在插入数据后获取主键:当有一个订单表和订单详情表,当插入订单表的数据后,需要在订单详情表插入该订单的具体购物情况,订单详情表需要的一个列是订单表的主键或者订单ID.(通俗讲:A表的主键是B表的 ...

  2. setoolkit+花生壳 制作钓鱼网站

    国家法律一定要遵守,知识要用在对的地方. 本贴只为了和大家交流学习,请勿用在其他地方,损害任何人的利益. 今天我,来说一下钓鱼网站 (在kali) 我们选择  1  回车 再选择 2 回车 再选择3 ...

  3. B - Common Divisors (codeforces)数论算法基本定理，唯一分解定理模板

    You are given an array aa consisting of nn integers. Your task is to say the number of such positive ...

  4. TX2Ubuntu16.04上安装 kinectV2

    本文参考   https://www.ncnynl.com/archives/201706/1780.html 参考    https://blog.csdn.net/qq_33835307/arti ...

  5. java加解密算法--对称加密工作模式

    对称加密又分为分组加密和序列密码.分组密码,也叫块加密(block cyphers),一次加密明文中的一个块.是将明文按一定的位长分组,明文组经过加密运算得到密文组,密文组经过解密运算(加密运算的逆运 ...

  6. DVWA-目录遍历-文件包含

    开门见山 · 目录遍历 替换成 2. 文件包含可以使用 绝对路径 也可以 3. 可以使用文件包含来包含一个网址,或者是一个shell 远程文件 空字符绕过字符过滤 %00

  7. spring hystrix和内置tomcat组件的参数调优解析

    1. springboot内置tomcat容器的参数配置 server: port: 12021 # server端的socket超时间(毫秒),使用值-1表示没有(即无限)超时,默认值为60000( ...

  8. 2018.11.2JavaScript随笔

    构造函数首字母大写 通过new创建对象 BOM:浏览器对象模型

  9. gcc和g++的区别解析

    1.误区:gcc只能编译C源代码,g++只能编译C++源代码 解析:其实gcc和g++都可以编译c/c++源代码,只是细节不同,后缀名为.c的源文件,gcc将其当作C程序,而g++则当作c++程序来处 ...

  10. 关于SpringMVC的使用总结

    简介 springMVC即Spring Web MVC,是spring web模块的一部分,是spring自己的web框架 springMVC对Servlet API 进行了完善的封装,极大的简化了开 ...