所谓的预加载技术就是在用户尚未触发页面跳转时，提前创建目标页面，这样当用户跳转时，就可以立即进行页面切换，节省创建新页面的时间，提升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. JDK源码阅读-------自学笔记(五)(浅析数组)

    一.数组基础 1.定义和特点 数组也可以看做是对象,数组变量属于引用类型,数组中每个元素相当于该队形的成员变量,数组对象存储在堆中. 2.初始化数组 常用类初始化 // 整型初始化 int[] int ...

  2. Java SE 5.0（JDK 1.5）新特性

    目录 自动装箱与拆箱 枚举(常用来设计单例模式) 静态导入static import 可变参数(Varargs) 内省(Introspector) 泛型(Generics) For-Each循环 ja ...

  3. clion 的 安装 变量配置的 搬运工(有点基础应该能看 大家看不懂 就是我自己看 哈哈哈哈哈哈)

    1  自行安装一个  clion 2 https://blog.csdn.net/u013023297/article/details/80723847   mingw  的配置    第二篇好像当时 ...

  4. VS程序不显示控制台

    之所以会有这样的想法是因为,有时候我会用到一些库,这些库在使用的时候会在控制台输出一些信息,虽然这是无可厚非的事情,但是,如果我写了一个界面,这个时候当然是希望要显示什么就显示在界面上,或者就不要显示 ...

  5. 第七届（16年）蓝桥杯java B组决赛真题 愤怒的小鸟 解题思路

    愤怒小鸟 X星球愤怒的小鸟喜欢撞火车! 一根平直的铁轨上两火车间相距 1000 米两火车 (不妨称A和B) 以时速 10米/秒 相对行驶. 愤怒的小鸟从A车出发,时速50米/秒,撞向B车,然后返回去撞 ...

  6. Spring原理系列一:Spring Bean的生命周期

    一.前言 在日常开发中,spring极大地简化了我们日常的开发工作.spring为我们管理好bean, 我们拿来就用.但是我们不应该只停留在使用层面,深究spring内部的原理,才能在使用时融汇贯通. ...

  7. SQL基础教程（第2版）第5章 复杂查询：练习题

    /* 下面是解答示例 */ -- 创建视图的语句 CREATE VIEW ViewPractice5_1 AS SELECT product_name, sale_price, regist_date ...

  8. day68-CSS-float浮动，clear清除浮动，overflow溢出

    1. float 浮动 1.1 在 CSS 中,任何元素都可以浮动. 1.2 浮动元素会生成一个块级框,而不论它本身是何种元素.内联标签设置浮动,就变成了块级标签. 1.3 关于浮动的两个特点: 浮动 ...

  9. 使用labelImg制作自己的数据集（VOC2007格式）用于Faster-RCNN训练

    https://blog.csdn.net/u011956147/article/details/53239325 https://blog.csdn.net/u011574296/article/d ...

  10. 201312-1 出现次数最多的数Java

    import java.util.HashMap; import java.util.Iterator; import java.util.Map; import java.util.Scanner; ...