纯web项目不能使用mui.preload进行页面预加载的解决办法

首先:
纯web项目不能使用mui.preload进行页面预加载的, 比如基于微信的web项目

怎么办呢? 自己写个简单的吧

1.需依赖 jQuery, mui 框架和mui基本样式库
2. iMuiPage.js 内容:

/*--------------------------------------------------------------------*

    * iMuiPage v2016-7-7

    * 只加载页面中body标签内的部分,等同$(document.body).html()

    * window._iMuiAct 当前显示页的 iMuiPage 对象

    * window._iMuiMshDv 加载等待的dom jq对象

    * window._iMuiPageObj[] 所有iMuiPage 对象数组

    * window._impEvent 当前加载页dom的jq对象,  dom创建时刷新

    * 加载页事件定义 

    * init事件 dom创建完成后触发

    * show事件 显示完成后触发

    * hide事件 隐藏完成后触发

    * body尾部加上下面的js

    * _impEvent.on('init[show|hide]',function(event,imp){this...});

    * 参数: event window的event对象,imp iMuiPage对象, this 加载页dom对象 

    *---------------------------------------------------------------------*/

var iMuiPage=function(opts, pel){

    var qp=$(pel);

    var pi=qp[0]?qp[0]:null; //页对象 不存在则创建

    //pel 初始页dom对象或jq筛选条件

    //opts 参数

    var df = {

        url:null, //页面地址

        data:null, //页面提交数据{....}

        id: null,  //页面id  默认页对象id 若无则为页面url

        save:1,   //是否缓存,不缓存隐藏后即销毁dom

        setdf:0, //设为根页, 即 window._iMuiPageObj[0]

        reload:0,   //是否每次重新加载, 缓存时有效

        refresh:0,   //强制重新加载, 重载后该值恢复为0

        autoshow:1, //是否加载完成显示

        waithtml:'<div class="waiticon">'

                +'<div class="bounce1"></div><div class="bounce2"></div>'

                +'<div class="bounce3"></div></div>', //等待提示内容

        error:function(){}, //错误处理

        hide:function(){}, //隐藏前处理,可与事件并用, 在hide事件前调用

        show: function() {}, //显示前处理,可与事件并用, 在show事件前调用

        loaded: function() {} //加载前成处理,可与事件并用, 在init事件前调用

    };

    var pms = {}; opts = opts || {};

    for (var k in df)  pms[k] = opts[k]==undefined? df[k] : opts[k];

    if(!pms.url) return null;



    //获取或创建等待dom

    function gMsgdv(){

        var g=window._iMuiMshDv;

        if(!g || !g[0]){

            g=$(document.createElement('div'))

                .attr('class','loadmsgdv');

            $(document.body).append(g);

            g.hide();

        }

        window._iMuiMshDv=g.html(pms.waithtml);

        return g;

    };



    //获取当前页id, 即此新开页的返回id

    function gbackid(){

        if(pms.setdf) return pms.id;

        if(!window._iMuiAct) return '';

        return window._iMuiAct.pm.id; 

    };

    //截取body内容

    function exBody(str) {

        if (!str) return '';

        var ar = str.match(/<body.*?>([\s\S]+)<\/body>/i);

        return (ar&&ar.length > 1) ? ar[1] : '';

    };

    //根据页id获取iMuiPage原型对象

    var _gimp=function(id){

        var g=null;

        $.each(window._iMuiPageObj, function(i,o){

            if(o && o.pm.id==id){

                g=o; return;

            }

        });

        return g;

    },

    _code= function(s){return encodeURIComponent(s)},

    _uncode= function(s){return decodeURIComponent(s)};



    //iMuiPage原型即c属性方法

    var c={

        el:pi, //当前页面dom对象 pi._imp=this iMuiPage原型

        index:0, //页面索引

        backid:'', //返回页id

        pm:pms,//原始参数

        mark:null,//遮罩

        gimp:_gimp,//根据页id获取原型对象

        code :_code,//编码

        uncode : _uncode,//解码

        showwait:function(open){

            if(!pms.autoshow&&!open) return;

            this.mark= mui.createMask(function(){return false});

            this.mark.show();

            gMsgdv().show();

            return this;

        },

        hidewait:function(open){

            if(!pms.autoshow&&!open) return;

            gMsgdv().hide(); this.mark._remove();  

            return this;

        },

        hide:function(){

            var p=window._iMuiAct;

            if(p && p.pm.id==pms.id) window._iMuiAct=null;

            if($.isFunction(pms.hide)) pms.hide(this);

            qp.fadeOut(500).trigger('hide',this);

            if(!pms.save) this.die();

            console.log(this.index,'pms.id hide',pms.id);

            return this;

        },

        show:function(){

            //本页显示前设置返回页id

            if(!this.backid) this.backid=gbackid(); 

            var act=window._iMuiAct;

            if(act && act.pm.id!=pms.id) window._iMuiAct.hide();

            if($.isFunction(pms.show)) pms.show(this);

            qp.fadeIn(500); window._iMuiAct=this;

            qp.trigger('show',this);

            console.log(this.index,'show',pms.id);

            return this;

        },

        back:function(){

            console.log(this.index,'back',pms.id);

            if(this.index==0) return this;

            var p=_gimp(this.backid) || window._iMuiPageObj[0];

            if(!p) return this;

            console.log(this.index,' -> ',p.index,'toback -> ',p.pm.id);

            this.hide(); 

            if(p.pm.reload) return p.load();

            return p.show();

        },

        clear:function(){

            var r=this.back();

            this.die(); return r;

        },

        test:function(){

            if(!console){alert('iMuiPage.test ...'); return;}

            console.log('iMuiPage.test',this);

        },

        //销毁dom

        die:function (){

                var p=window._iMuiPageObj[this.index];

                if(p) window._iMuiPageObj[this.index]=null;

                if(!p.el) return;

                console.log(p.index,'die: ',p.pm.id);

                $(p.el).remove(); p=null;

        }

    };



    //加载或重载url

    c.load=function(){

        this.showwait();

        console.log(this.index,'toload',pms.id,pms.data);

        $.ajax({url: pms.url, data: pms.data,

            cache: false, dataType: 'html', context: this, //回传this

            success:function(str,status){

                this.hidewait();

                //this.backid=gbackid(); //show中定义了 本页显示前设置

                window._impEvent=qp;

                if($.isFunction(pms.loaded)) pms.loaded(this);

                qp.off().die(); //销毁前定义事件, 防止重复

                console.log(this.index,'event.die',pms.id);

                var htm=exBody(str),

                    wback=qp.html(htm).find('.w-back')[0];

                if(wback) wback._imp=this;

                qp.trigger('init', this);

                if(pms.autoshow) this.show();

            },

            error:function(ajx,status){

                if($.isFunction(pms.error)) pms.error(ajx,status,this);

            }

        });

        return this;

    }

    // 初始化方法

    c.init = function() {

        if(!window._iMuiPageObj){

            window._iMuiPageObj=[];

            $(window).resize(function(){

                this._wh=document.documentElement.clientHeight;

            });

        }



        if(pi) pms.id=qp.attr('id');

        pms.id=pms.id || _code(pms.url);

        console.log('init',pms.id);

        var cx=_gimp(pms.id);   

        if(!pi){//无页对象创建

            if(!cx){//检查无重名对象, 创建

                pi=document.createElement('div');

                qp=$(pi).attr({id:pms.id, class:'w-page'});

                $(document.body).append(pi);

                qp.hide();

                console.log('this.create',pms.id);

            }else{

                pi=cx.el; qp=$(pi);

                console.log(cx.index,'this.find',pms.id);

            }

        }

        pi._imp=this;

        this.el=pi;

        if(cx){//已存在

            if(pms.setdf){//设置为根页

                if(cx.index!=0){

                    window._iMuiPageObj[cx.index]=null;

                    cx.index=0; this.save=1; this.backid=pms.id;

                }

            }

            this.index=cx.index;

            this.backid=cx.backid;

            window._iMuiPageObj[cx.index]=this;

            if(cx.pm.url==pms.url){

                if(pms.reload||!pms.save||pms.refresh){pms.refresh=0;return this.load()};

                return this.show();

            }

        }else{

            qp.css('height',window._wh+'px');

            if(pms.setdf){//设置为根页,并销毁原根页dom

                if(window._iMuiPageObj[0]) window._iMuiPageObj[0].die();

                this.index=0; this.save=1; this.backid=pms.id;

                window._iMuiPageObj[0]=this;

            }else  this.index=window._iMuiPageObj.push(this)-1;

        }

        console.log(this.index,'endinit',pms.id);

        if(pel && this.index==0) return this;

        return this.load();

    };

    return c.init();

}

/*初始化事件*/

function iMuiPageInit(){

    if(window._iMuiPageObj) return;

    var de=$('.w-page')[0]; if(!de) return;

    var u=document.location.pathname+document.location.search;

    console.log('iMuiPageInit',u);

    window._iMuiAct=iMuiPage({save:1,setdf:1,url:u},de);

    $('.w-back').off().die().live('tap',function(){

        if(!this._imp) return;

        console.log('w-back.tap',this._imp.pm.id);

        this._imp.back();

    });

    //iMuiPage({url:'welcome.htm',save:0});

}

$(function(){ 

    window._wh=document.documentElement.clientHeight;

    iMuiPageInit();

});

3.调用方法:

//下例可作为预加载或是隐式刷新

iMuiPage({url:'xxx.html',save:1,setdf:1,autoshow:0,refresh:1});  

//下例直接打开一个页面

iMuiPage({url:'xxx.html'});  

//参数说明

var df = {

        url:null, //页面地址

        data:null, //页面提交数据{....}

        id: null,  //页面id  默认页对象id 若无则为页面url

        save:1,   //是否缓存,不缓存隐藏后即销毁dom

        setdf:0, //设为根页, 即 window._iMuiPageObj[0]

        reload:0,   //是否每次重新加载, 缓存时有效

        refresh:0,   //强制重新加载, 重载后该值恢复为0

        autoshow:1, //是否加载完成显示

        waithtml:'<div class="waiticon">'

                +'<div class="bounce1"></div><div class="bounce2"></div>'

                +'<div class="bounce3"></div></div>', //等待提示内容

        error:function(){}, //错误处理

        hide:function(){}, //隐藏前处理,可与事件并用, 在hide事件前调用

        show: function() {}, //显示前处理,可与事件并用, 在show事件前调用

        loaded: function() {} //加载前成处理,可与事件并用, 在init事件前调用

    };

4.附加样式

/*waiticon -----*/

.waiticon {margin:30px auto 0;  width: 150px;  text-align: center;}

.waiticon > div {

  width: 30px;  height: 30px;

  background-color: #FE4900;

  border-radius: 100%;

  display: inline-block;

  -webkit-animation: bouncedelay 1.4s infinite ease-in-out;

  animation: bouncedelay 1.4s infinite ease-in-out;

  /* Prevent first frame from flickering when animation starts */

  -webkit-animation-fill-mode: both;

  animation-fill-mode: both;

}

.waiticon .bounce1 {

  -webkit-animation-delay: -0.32s;

  animation-delay: -0.32s;

}

.waiticon .bounce2 {

  -webkit-animation-delay: -0.16s;

  animation-delay: -0.16s;

}

@-webkit-keyframes bouncedelay {

  0%, 80%, 100% { -webkit-transform: scale(0.0) }

  40% { -webkit-transform: scale(1.0) }}

/*waiticon ---end--*/

6.页面布局

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">

        <meta name="apple-mobile-web-app-capable" content="yes">

        <meta name="apple-mobile-web-app-status-bar-style" content="black">

        <link rel="stylesheet" href="css/mui.min.css">

        <script src="jquery/jquery.min.js"></script>

        <script src="js/mui.min.js"></script>

        <script src="js/iMuiPage.js"></script>

        <title>iMuiPage示例</title>

    </head>



    <body>

        <div class="w-page">

        <header class="mui-bar mui-bar-nav">

            <a class="w-back mui-icon mui-icon-left-nav mui-pull-left">返回</a>

            <h1 class="mui-title fcfff">iMuiPage示例</h1>

        </header>

        <div class="mui-content mui-scroll-wrapper">

            <div class="mui-scroll">

                <ul class="mui-table-view lstbar">

                    <li class="mui-table-view-cell mui-media">

                        <a class="mui-navigate-right" url="xxx1.html">

                            <div class="mui-media-body">

                            <span class="mui-icon mui-icon-arrowright"></span>xxx1.html

                            </div>

                        </a>

                    </li>

                    <li class="mui-table-view-cell mui-media">

                        <a class="mui-navigate-right" url="xxx2.html">

                            <div class="mui-media-body">

                            <span class="mui-icon mui-icon-arrowright"></span>xxx2.html

                            </div>

                        </a>

                    </li>

                </ul>

            </div>

        </div>

        </div>

        <script>

        (function($m){

                var qi,qback;

                function init(){

                    qback=$('.w-back',qi);

                    $('a[url]',qi).on('tap',function(){

                        if(!this._url) this._url=$(this).attr('url');

                        if(!this._url || this._url.match(/#+/i)) return;

                        console.log('a.tap:',this._url);

                        iMuiPage({url:this._url,reload:1});

                        return false;

                    });

                    /*

                    $(function(){

                        //重定义返回按钮点击事件

                        qback.off().die().on('tap',function(){

                            this._imp=null;

                            iMuiPage({url:'dft.html',save:1,reload:1});

                        });

                    });*/

                }

                function show(){

                    $m('.mui-scroll-wrapper',qi[0]).scroll({

                        indicators: true //是否显示滚动条

                    });

                }

                if(!window._impEvent){

                    qi=$('.w-page');

                    $m.init({swipeBack: false});

                    $('.w-back',qi).html('首页');

                    init(); show(); return;

                }

                qi=_impEvent;

                qi.on('init',function(evt,imp){

                    init();

                    console.log(this.id,'init....');

                }).on('show',function(){

                    show();

                    console.log(this.id,'show....');



                }).on('hide',function(){

                    console.log(this.id,'hide....');

                });

            })(mui);

        </script>

    </body>

</html>