最近做网站,倾向于接口开发的那种,所有的业务会先进页面然后根据业务需求从后台接口拉取数据填充绘制页面,这样带来的一个弊端就是数据加载绘制完成之前页面会很空,而且给用户感觉也不是特别友好,现在我想能不能把下一个页面的脚本先执行完成,数据拉去回来完成绘制了在呈现到客户面前,这样能更友好一点
A页面访问B页面
现在应该是先访问页面在执行ajax绘制方法 中间ajax有个等待
B页面
$(function(){
//init();
//初始化数据
$.post('/**.htm',function(rs){
$.each(rs.list, function(k,v) {
$('.list').append('
});
},'json')
})
经过参考其他资料得出下面的解决方案暂未完成
--------------other------------
index
(function(){
var os;
var parms = {
$id : '${pageid}' ,
pagename: "index" ,
s: 0 ,
initFun : function(){
os = avalon.vmodels['${pageid}'];
console.log('首页模块');
os.s += 1 ;
$.post('http://192.168.2.99:8080/cate/list.htm',function(rs){
console.log(rs);
},'json');
os.initCallBack();
},
initCallBack : function(){
}
} ;
return parms;
}
)();
这是一个标准页面所有页面都会把脚本和绘制分开执行
var loadpage = function(cxt){
if(first) { first = false ; return ; }
var pathname = cxt.pathname ;
require(['text!' + pathname],function(test){
var div = $('
div.html(test)
// 获取js执行块
var tojsteml = div.find('.jstemp').text().replace(/[\n]/g, '');
var toconfig = new Function("","return " + tojsteml)();
//获取视图模块
var htmlteml = div.find('.htmlteml').html();
if(!avalon.vmodels[toconfig.$id]){
toconfig.initCallBack = function(){
os.content = htmlteml ;
}
console.log('添加构造器')
avalon.define(toconfig) ;
}else{
avalon.vmodels[toconfig.$id].initCallBack = function(){
os.content = htmlteml ;
}
}
avalon.vmodels[toconfig.$id].initFun();
})
发生了错误 ,但是没有影响到页面展示不知道为什么
这是预加载的内容
这是预加载的配置
var os,timer = {};
var parms = {
$id : '${pageid}' ,
list : ['1','12'] ,
initFun : function(){
os = avalon.vmodels[this.$id];
os.initCallBack();
},
initCallBack : function(){}
} ;
return parms;
第一次加载的时候错误
controller SyntaxError: Unexpected identifier
at Function (native)
at Function.a [as render] (https://cdnjs.cloudflare.com/ajax/libs/avalon.js/2.1.5/avalon.min.js:3:15578)
at avalon.directive.update (https://cdnjs.cloudflare.com/ajax/libs/avalon.js/2.1.5/avalon.min.js:2:8537)
at e.exports (https://cdnjs.cloudflare.com/ajax/libs/avalon.js/2.1.5/avalon.min.js:2:7632)
at Object.avalon.directive.diff (https://cdnjs.cloudflare.com/ajax/libs/avalon.js/2.1.5/avalon.min.js:2:8345)
at https://cdnjs.cloudflare.com/ajax/libs/avalon.js/2.1.5/avalon.min.js:3:20846
at String.replace (native)
at o (https://cdnjs.cloudflare.com/ajax/libs/avalon.js/2.1.5/avalon.min.js:3:20768)
at a (https://cdnjs.cloudflare.com/ajax/libs/avalon.js/2.1.5/avalon.min.js:3:20496)
at a (https://cdnjs.cloudflare.com/ajax/libs/avalon.js/2.1.5/avalon.min.js:3:20531) SyntaxError: Unexpected identifier
at Function (native)
at Function.a [as render] (https://cdnjs.cloudflare.com/ajax/libs/avalon.js/2.1.5/avalon.min.js:3:15578)
at avalon.directive.update (https://cdnjs.cloudflare.com/ajax/libs/avalon.js/2.1.5/avalon.min.js:2:8537)
at e.exports (https://cdnjs.cloudflare.com/ajax/libs/avalon.js/2.1.5/avalon.min.js:2:7632)
at Object.avalon.directive.diff (https://cdnjs.cloudflare.com/ajax/libs/avalon.js/2.1.5/avalon.min.js:2:8345)
at https://cdnjs.cloudflare.com/ajax/libs/avalon.js/2.1.5/avalon.min.js:3:20846
at String.replace (native)
at o (https://cdnjs.cloudflare.com/ajax/libs/avalon.js/2.1.5/avalon.min.js:3:20768)
at a (https://cdnjs.cloudflare.com/ajax/libs/avalon.js/2.1.5/avalon.min.js:3:20496)
at a (https://cdnjs.cloudflare.com/ajax/libs/avalon.js/2.1.5/avalon.min.js:3:20531) diffProps error