最近做网站,倾向于接口开发的那种,所有的业务会先进页面然后根据业务需求从后台接口拉取数据填充绘制页面,这样带来的一个弊端就是数据加载绘制完成之前页面会很空,而且给用户感觉也不是特别友好,现在我想能不能把下一个页面的脚本先执行完成,数据拉去回来完成绘制了在呈现到客户面前,这样能更友好一点
A页面访问B页面
现在应该是先访问页面在执行ajax绘制方法 中间ajax有个等待
B页面
经过参考其他资料得出下面的解决方案暂未完成
<%@ page language="java" pageEncoding="utf-8"%>
<%@ include file="commons/init.jsp"%>
当前页面 {{@pagename}},已访问次数{{@s}}
--------------other------------
index
test
index
这是一个标准页面所有页面都会把脚本和绘制分开执行
var loadpage = function(cxt){
if(first) { first = false ; return ; }
var pathname = cxt.pathname ;
require(['text!' + pathname],function(test){
var p = $('');
p.html(test)
// 获取js执行块
var tojsteml = p.find('.jstemp').text().replace(/[\n]/g, '');
var toconfig = new Function("","return " + tojsteml)();
//获取视图模块
var htmlteml = p.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
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
$.ajax({
你需要的是「服务端渲染」吧?Google “Server Rendering”
做一个加载动画就行了 像APP那样
这个必须后端支持输出页面啊
然后在head标签中添加一些特殊的link 标签进行预加载
否则你需要通过AJAX加载好下一页的数据与模板,生成HTML,放到localStorage中
然后进入下一页的onload中先到localStorage中寻找一下
没有才AJAX当前页面的数据与模板
但是这样做对SEO不好,并且非常复杂及易出错