最近做网站，倾向于接口开发的那种，所有的业务会先进页面然后根据业务需求从后台接口拉取数据填充绘制页面，这样带来的一个弊端就是数据加载绘制完成之前页面会很空，而且给用户感觉也不是特别友好，现在我想能不能把下一个页面的脚本先执行完成，数据拉去回来完成绘制了在呈现到客户面前，这样能更友好一点
A页面访问B页面
现在应该是先访问页面在执行ajax绘制方法 中间ajax有个等待
B页面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div class="list">
<!-- 放置动态绘制的数据 -->
</div>
</body>
</html>
<script type="text/javascript">
$(function(){
//init();
//初始化数据
$.post('/**.htm',function(rs){
$.each(rs.list, function(k,v) {
$('.list').append('<div>'+v+'</div>')
});
},'json')
})
</script>经过参考其他资料得出下面的解决方案暂未完成
<%@ page language="java" pageEncoding="utf-8"%>
<%@ include file="commons/init.jsp"%>
<c:set var="pageid" value="index"/>
<!doctype html>
<html>
<head>
<title></title>
<jsp:include page="commons/header.jsp" flush="true" />
</head>
<body ms-controller="os">
<div ms-html="@content|sanitize" class="htmlcontent"></div>
<div class="htmlteml hide">
<div sign="${pageid}" ms-controller="${pageid}">
当前页面 {{@pagename}},已访问次数{{@s}}
</div>
</div>
--------------other------------
<br />
<a href="index.htm">index</a><br />
<a href="test.htm">test</a>
index
</body>
</html>
<script type="text/javascript" class="jstemp">
(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;
}
)();
</script>
<script type="text/javascript" src="index.js"></script>
这是一个标准页面所有页面都会把脚本和绘制分开执行
做一个加载动画就行了 像APP那样
$.ajax({
type : "POST",
url : url,
data : "param=" + JSON.stringify(param),
dataType : (type && type.length > 0) ? type : "json",
beforeSend: function(){
// 封装的一个页面加载动画
// 如： $("<div id='loading'> </div>").height($(window).innerHeight()).appendTo("body").show();
//_MAIN.loadStart();
},
success : function(data) {
// 封装的一个页面加载动画取消
//如： $("#loading").hide();
//_MAIN.loadEnd();
var data = (type === "json") ? (eval("(" + data + ")"))
: data;
if (typeof callback == 'function') {
callBack(data);
} else {
alert("callback is not a function");
}
}这个必须后端支持输出页面啊
然后在head标签中添加一些特殊的link 标签进行预加载
http://stackoverflow.com/questions/15099915/whats-the-right-method-to-set-a-new-prerender-or-prefetch-in-html
<link rel="prefetch"> is actually part of the HTML 5 spec.
<link rel="prerender"> appears to be Google doing their own thing.
否则你需要通过AJAX加载好下一页的数据与模板，生成HTML，放到localStorage中
然后进入下一页的onload中先到localStorage中寻找一下
没有才AJAX当前页面的数据与模板
但是这样做对SEO不好，并且非常复杂及易出错
你需要的是「服务端渲染」吧？Google “Server Rendering”