实用教程 Pjax局部无刷新技术教程(本站无刷新跳转基于此教程实现)

参与数
5
被浏览
501
写回答 DATE:2018-11-21
迷途
主题数:193 回答数:448 被采纳:53 被赞同:39

首先要先引用jq库,以及pjax文件(见附件)。

方法一:

$(document).pjax('a', '#body', {fragment:'#body', timeout:8000});

解释:将全站的a标签作为无刷新触发条件,#body被刷新的部位,fragment为缓存保留名称,timeout超时

方法二:

$.pjax.defaults.timeout = 8000;  
$.pjax.defaults.maxCacheLength = 0;  
$(document).pjax('a', '#body', { fragment: '#body' });

解释:和方法一差不多,拆分写法

$(document).on('pjax:send', function() { //pjax链接点击后显示加载动画;
    $(".spinner").css("display", "block");
});

解释:pjax:send  标识表示是显示加载前的状态

$(document).on('pjax:complete', function() {  
$(".spinner").css("display", "none");//加载完隐藏动画;
}

解释:局部刷新到指定页面后,内置加载方法,主要作用于兼容,兼容js,jq等特效代码

pjax局部刷新是不会加载任何js代码~

那么本站是使用了自定义的方法,而非全局调用,为了更好兼容模板,从而实现音乐不间断播放。


原创教程:转载请说明出处。

本文来源于:http://bbs.432k.cn/thread-929.htm

上传的附件:

打赏排行 用户名 打赏金额
第1名 zhang 1金币
最新回复 (5)
  • zhang 11月前
    引用 2
    牛牛又出教程了
  • 李聪 8月前
    引用 3
    这个怎么搞的,小白具体怎么操作
  • 迷途 8月前
    引用 4
    李聪 这个怎么搞的,小白具体怎么操作
    直接引用 jq库之后  页面 加载 方法1就行 
    可以 先体验流程 然后在进阶~
  • 李聪 8月前
    引用 5
    迷途 直接引用 jq库之后 页面 加载 方法1就行 可以 先体验流程 然后在进阶~
    能在说明白点吗?
  • 123 7月前
    引用 6

       ………………  小白表示看懂了,  你应该是 没仔细看内容, 仔细看教程 在结合楼主说的,没有任何难度~ (^-^)V

返回
[复制本页网址]
Date...
*四叶草提供天气查询