ajax网站怎么完成对访问页面的预加载?

最近做网站,倾向于接口开发的那种,所有的业务会先进页面然后根据业务需求从后台接口拉取数据填充绘制页面,这样带来的一个弊端就是数据加载绘制完成之前页面会很空,而且给用户感觉也不是特别友好,现在我想能不能把下一个页面的脚本先执行完成,数据拉去回来完成绘制了在呈现到客户面前,这样能更友好一点

A页面访问B页面
现在应该是先访问页面在执行ajax绘制方法 中间ajax有个等待
B页面



    
        
        
    
    
        

经过参考其他资料得出下面的解决方案暂未完成

<%@ page language="java" pageEncoding="utf-8"%>
<%@ include file="commons/init.jsp"%>








    
当前页面 {{@pagename}},已访问次数{{@s}}
--------------other------------
index
test index
当前页面 {{@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 div = $('
'); div.html(test) // 获取js执行块 var tojsteml = div.find('.jstemp').text().replace(/[ ]/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(); })
'); div.html(test) // 获取js执行块 var tojsteml = div.find('.jstemp').text().replace(/[ ]/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
已邀请:

zzkzhou521

赞同来自:

做一个加载动画就行了 像APP那样

Kevinmajh1

赞同来自:

你需要的是「服务端渲染」吧?Google “Server Rendering”

要回复问题请先登录注册