javascript - ajax网站怎么完成对访问页面的预加载?
ringa_lee
ringa_lee 2017-04-11 12:23:52
[JavaScript讨论组]

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

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
ringa_lee
ringa_lee

ringa_lee

全部回复(4)
PHP中文网

$.ajax({

            type : "POST",
            url : url,
            data : "param=" + JSON.stringify(param),
            dataType : (type && type.length > 0) ? type : "json",
            beforeSend: function(){
                  // 封装的一个页面加载动画 
                  // 如: $("<p id='loading'>                </p>").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");
                }
            }
天蓬老师

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

迷茫

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

迷茫

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

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

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号