zoukankan      html  css  js  c++  java
  • mui webview 预加载

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

  • 相关阅读:
    docker 部署aps.net MVC到windows容器
    docker 搭建私有仓库 harbor
    解决关于:Oracle数据库 插入数据中文乱码 显示问号???
    ionic cordova build android error: commamd failed with exit code eacces
    cordova build android Command failed with exit code EACCES
    Xcode 10 iOS12 "A valid provisioning profile for this executable was not found
    使用remix发布部署 发币 智能合约
    区块链: 编译发布智能合约
    mac 下常用命令备忘录
    JQuery fullCalendar 时间差 排序获取距当前最近的时间。
  • 原文地址:https://www.cnblogs.com/honeynm/p/12372120.html
Copyright © 2011-2022 走看看