天天看點

ajax預加載函數,ajax網站怎麼完成對通路頁面的預加載?

最近做網站,傾向于接口開發的那種,所有的業務會先進頁面然後根據業務需求從背景接口拉取資料填充繪制頁面,這樣帶來的一個弊端就是資料加載繪制完成之前頁面會很空,而且給使用者感覺也不是特别友好,現在我想能不能把下一個頁面的腳本先執行完成,資料拉去回來完成繪制了在呈現到客戶面前,這樣能更友好一點

A頁面通路B頁面

現在應該是先通路頁面在執行ajax繪制方法 中間ajax有個等待

B頁面

$(function(){

//init();

//初始化資料

$.post('/**.htm',function(rs){

$.each(rs.list, function(k,v) {

$('.list').append('

'+v+' ')

});

},'json')

})

經過參考其他資料得出下面的解決方案暫未完成

目前頁面 {{@pagename}},已通路次數{{@s}}

--------------other------------

index

test

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();

})

發生了錯誤 ,但是沒有影響到頁面展示不知道為什麼

這是預加載的内容

11

這是預加載的配置

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