前言: pjax 是 HTML5 pushState 以及 Ajax 两项技术的简称,综合这两个技术可以实现在不刷新页面的情况下载入HTML网页,带给你超快速的浏览器体验,而且有固定链接、标题以及后退按钮都是有效的。具体效果可以看本站,为什么分享?因为今天在群里看到有人提问为什么网站无刷新秒加载,所以特在此分享出来。

pjax工作原理


用大白话来说,就是ajax的升级版--可以动态记录历史记录的ajax技术。我们之前用ajax来做无刷新分页,一个最大的不足之处就是无法通过uri来标识这个资源以及历史记录倒退问题,通过利用html5 pushState的api,我们可以轻松达到发送ajax请求的同时,动态的记录状态,这就是pjax!


步骤开始

一、检查你的网站是否引入1.7.0版本以上的jquery.js,如果没有请全局引入,https://files.cnblogs.com/files/fan-bk/pjax.js pjax文件下载地址 pjax body 代码结束前引入pjax.js

  

二、将body的id设置为 content

在主题footer文件 body结束标签前面 添加代码:

<div style="display:none; z-index:9999; background-color: #ea4961; position:fixed; top:0px; width:100%; height:100vh;" class="pjax_loading">
</div>
<script type="text/javascript" src="<?php $this->options->themeUrl('js/pjax.js'); ?>"></script> <!--引入pjax-->
<script>
$(document).pjax('a', '#content', {fragment:'#content', timeout:6000}); //这是a标签的pjax,#content 表示执行pjax后会发生变化的id,改成你主题的内容主体id或class。timeout是pjax响应时间限制,如果在设定时间内未响应就执行页面转跳,可自由设置;
//$(document).on('submit', 'form', function (event) {$.pjax.submit(event, '#content', {fragment:'#content', timeout:6000});}); //这是提交表单的pjax。form表示所有的提交表单都会执行pjax,比如搜索和提交评论,可自行修改改成你想要执行pjax的form id或class。#content 同上改成你主题的内容主体id或class;
$(document).on('pjax:send', function() { //pjax链接点击后显示加载动画;
    //$(".pjax_loading").css("display", "block");
});
$(document).on('pjax:complete', function() { //pjax链接加载完成后隐藏加载动画;
    //$(".pjax_loading").css("display", "none");
    pjax_loadDuodsuo();//解决多说评论;
});
function pjax_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>

至此大功告成!