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

    0x00 知识点 phpMyadmin(CVE-2018-12613)后台任意文件包含漏洞 影响版本:4.8.0--4.8.1 payload:/phpmyadmin/?target=db_datad ...

  2. CodeForces - 131C The World is a Theatre（组合数）

    题意:已知有n个男生,m个女生.现在要选t个人,要求有至少4个男生,至少1个女生,求有多少种选法. 分析: 1.展开,将分子中的m!与分母中n!相约,即可推出函数C. #pragma comment( ...

  3. 读取word模板，填充数据后导出

    一.需求说明 定期生成word报告,报告中含有文本.表格.图表等元素,依次获取进行替换,保留原有样式,生成新的word文档 二.引入依赖 <dependency> <groupId& ...

  4. @Autowired注解与@Resource注解的区别(详细)

    相信对现在Java码农来说,@Autowired跟@Resource并不陌生,二者都可以自动注入,但是两者的区别很多时候并没有被注意到. 一.注解的出处 @Autowired是Spring提供的注解, ...

  5. JavaScript之递归

    什么是递归? 程序调用自身的编程技巧称为递归( recursion).递归策略只需少量的程序就可描述出解题过程所需要的多次重复计算,大大地减少了程序的代码量 . 递归的能力在于用有限的语句来定义对象的 ...

  6. selenium登陆qq邮箱页面

    from selenium import webdriver driver = webdriver.Chrome() driver.get('https://mail.qq.com/cgi-bin/l ...

  7. Windows环境下spyder调用Arcpy

    用python写代码还是喜欢spyder,所以在网上找了通过spyder调用arcpy的方法. 这篇帖子总结的方法非常详细,且通过本人实践,切实可行https://blog.csdn.net/qq_2 ...

  8. 通过geopandas.sjoin()函数按多边形范围分割点

    最近有一批点和多变型的数据,需要将点按照多边形的区域进行分割. 经过若干尝试,终于通过geopandas的sjoin函数得以实现. 这里首先感谢博主“张da统帅”的分享,使得本人获得该实现方法的灵感, ...

  9. 题解【[FJOI2018]所罗门王的宝藏】

    本题解同步于luogu emmm切了近年省选题来写题解啦qwq 该题较其他省选题较水吧(否则我再怎么做的出来 思路是图论做法,做法上楼上大佬已经讲的很清楚了,我来谈谈代码实现上的一些细节 \[\tex ...

  10. h5-立方体

    1.制作一个立方体:首先要有6个面 <div class="box"> <div class="front">front</div ...