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

发布于 2022-09-03 13:20:50 字数 6103 浏览 19 评论 0

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

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>

这是一个标准页面所有页面都会把脚本和绘制分开执行

var loadpage = function(cxt){
            if(first) { first = false ; return ; }
            var pathname = cxt.pathname ;
            require(['text!' + pathname],function(test){
                var div = $('<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();
    })

发生了错误，但是没有影响到页面展示不知道为什么
这是预加载的内容

<div sign="cate" ms-controller="cate">
                <div>
                    <div class="menu-navi">
                         <!--ms-for: el in @list-->
                            <div class="item pl-anim">11</div>
                         <!--ms-for-end:-->
                    </div>
                </div>
            </div>

这是预加载的配置

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

╰ゝ天使的微笑 2022-09-10 13:20:50

$.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");
                }
            }

回复收藏 0

孤者何惧 2022-09-10 13:20:50

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

回复收藏 0

感情洁癖 2022-09-10 13:20:50

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

回复收藏 0

真心难拥有 2022-09-10 13:20:50

这个必须后端支持输出页面啊

然后在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不好，并且非常复杂及易出错

回复收藏 0

~没有更多了~