纯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>
以上涉及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
0 个评论