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

分类：MUI

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

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

1.需依赖 jQuery, mui 框架和mui基本样式库

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>

以上涉及2个关键命名样式 w-page, w-back
w-page: 页面根容器加上此样式名
w-back: 返回按钮加上此样式名

更多精彩内容请访问DCloud官网（http://www.dcloud.io/）

2016-11-23 修正 iMuiPageInit 中一个小BUG
2016-11-29 修正 c.init 中一个小BUG

6 赞关注分享