Speed丨如何快速给网站添加Pjax?

少羽.
少羽.
少羽.
694
文章
92
评论
2018年12月8日22:45:27 评论 8.3K 2303字阅读7分40秒
广告也精彩
什么是Pjax

Pjax是一种很多网站( facebook,  twitter)都支持的浏览方式, 当你点击一个站内链接的时候, 不是做页面跳转, 而是只是站内页面刷新。设置后的这些网站的ajax刷新是支持浏览器历史的, 刷新页面的同时, 浏览器地址栏位上面的地址也是会更改, 用浏览器的回退功能也能够回退到上一个页面。Pjax是可以增加访客打分的好功能。

Speed丨如何快速给网站添加Pjax?
为何要添加此功能?

1.有助于提升访问质量。

2.极大地减小了服务器的资源消耗。

如何添加?

①  检查你的网站是否引入1.7.0版本以上的jquery.js,如果没有请全局引入。

引用格式:

  1. <script type="text/javascript" src="//lib.sinaapp.com/js/jquery/1.9.0/jquery.js"></script>

②编辑Footer(底部文件),添加此代码。

绑定本页面非新窗口打开的所有本域链接,链接点击后,替换contentleft容器内容为新内容contentleft,ajax超时时间8秒

<script>
    $(document).pjax('a[target!=_blank]', '#contentleft', {fragment:'#contentleft', timeout:8000});</script>

如果jq失效怎么办?

问题比如:pjax之后多说评论框不加载,ajax评论不能提交等等问题。

问题原因:原先容器绑定的事件被新容器替换掉了,新容器的div没有绑定事件,所以点击无效。

解决方法:利用pjax的加载完成回调函数,重新绑定事件。

例:

<script>
$(document).on('pjax:complete', function() {
    pajx_loadDuodsuo();//pjax加载完成之后调用重载多说函数
});
function pajx_loadDuodsuo(){
var dus=$(".ds-thread");
if($(dus).length==1){
var el = document.createElement('div');
el.setAttribute('data-thread-key',$(dus).attr("data-thread-key"));//必选参数
el.setAttribute('data-url',$(dus).attr("data-url"));
DUOSHUO.EmbedThread(el);
$(dus).html(el);
}
}
</script>

汇总起来,就是下段:

<script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.9.0/jquery.js"></script> 
<script type="text/javascript" src="//24bp.cn/mine/pjax.js"></script>
<div class="pjax_loading"></div>
<script>
$(document).pjax('a[target!=_blank]', '#contentleft', {fragment:'#contentleft', timeout:8000});
$(document).on('pjax:send', function() { //pjax链接点击后显示加载动画;
    $(".pjax_loading").css("display", "block");
});
$(document).on('pjax:complete', function() { //pjax链接加载完成后隐藏加载动画;
    $(".pjax_loading").css("display", "none");
    pajx_loadDuodsuo();
});
function pajx_loadDuodsuo(){
var dus=$(".ds-thread");
if($(dus).length==1){
var el = document.createElement('div');
el.setAttribute('data-thread-key',$(dus).attr("data-thread-key"));//必选参数
el.setAttribute('data-url',$(dus).attr("data-url"));
DUOSHUO.EmbedThread(el);
$(dus).html(el);
}
}
</script>

Pjax这样就添加成功了!

WordPress如何添加Pjax?

WordPress最简单的全站Pjax教程,最简单wp主题设置pjax,就一个js调用修改一下js里的自定义内容的id属性就可以了,修改下面代码的page为你的id属性,注本文末有下载链接,下面代码只是自定义的那一部分要修改下载的,调用代码添加到主题页脚或页眉文件都可以。

Js自定义:

// 自定义
$(function() {
$(document).pjax('a[target!=_blank]', '#page', {fragment:'#page', timeout:6000});
$(document).on('pjax:send', function() {
$('#page').fadeTo(700,0.0);
});
$(document).on('pjax:complete', function() {
$('#page').fadeTo(700,1);
});
});

调用代码:

<script src="/路径/pjax.js"></script>

 

继续阅读
广告也精彩
少羽.
  • 本文由 发表于 2018年12月8日22:45:27
  • 除非特殊声明,本站文章均为原创,转载请务必保留本文链接
使用360识图当图床API教程 探索之路

使用360识图当图床API教程

前文 前两天发现京东图床的代码有点小问题了,个别图片无法上传,于是抓一下360的。 大家可以学习一下怎么抓。 PHP关键函数:parse_str、curl_getinfo 流程 360其实有些地方很业...
漏洞预警 | ThinkPHP5远程命令执行漏洞 技术园

漏洞预警 | ThinkPHP5远程命令执行漏洞

前言 ThinkPHP是一个免费开源的,快速、简单的面向对象的轻量级PHP开发框架,是为了敏捷WEB应用开发和简化企 业应用开发而诞生的。由于其简单易用,国内用户众多。 2019年1月11日Think...
wordpress知更鸟主题全站pjax无刷新 探索之路

wordpress知更鸟主题全站pjax无刷新

前言 首先说明一下,不是专业的,很菜,全站pjax会弄,但是会有很多问题,有兴趣的小伙伴可以折腾完善一下哈! 教程 第一步:在header.php文件中body前引用jquery.js文件一般模版都有...
广告也精彩
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: