Waxxh's Blog

草长得老高了，一次除个干净

工作了才发现时间是可以过得这么快，还有两个月就工作一年了。日复一日，似乎周一开始上班，周五（周末？）下班两个时间点才比较有时间感。刚出来工作，大部分时间都得围绕着工作转悠，工作用的C++，不相关的博客就被冷落到一边了，难得闲下来，就做个大扫除，把instantclick下了，换成pjax，再做些小优化。

instantclick的预加载效果的确很好，加载飞快，但使用时前进后退网页还有一些小问题个人无法解决，最后还是折腾下pjax，网站本身速度不慢，效果还是不错的。

正常网页切换跳转链接会白屏闪一下，才加载内容，观感体验差，为了解决这个问题就可以使用pjax。pjax是jquery库中一个局部刷新技术，只刷新pjax容器内或加上pjax标签的内容，而普通网页跳转是整个网页内容全部刷新。局部刷新技术使得网页部分相同资源、内容无需重复刷新，也降低服务器资源消耗。网页加载中，可添加过渡动画，还能增强网页连贯性及提高访客体验。更具体的原理如需了解还请搜索相关资料，下面就班门弄斧地介绍一下本站部署pjax的步骤。

一、首先添加pjax容器，就是需要pjax局部刷新的部分，这个一般是网页的body部分，容器id为content；

 <body>
    <div id="content">
      //需要pjax局部刷新的部分
   </div>
 </body>

二、添加过渡动画、引入对jquery.js、pjax.js的支持，需要在pjax容器content，即body标签之外，比如在header.php的head标签之间或footer.php的footer标签之间加入以下代码；

/*过渡动画，自行调整显示大小及替换动画img、svg的网址*/
<div style="display:none;z-index:999;position: fixed;top:50%;left:50%;transform: translate(-50%,-50%);opacity:0.8" class="pjax_loading"><img width="120px" src="//loading.io/spinners/flask/index.svg"></div> 

/*引入jq和pjax，pjax一定要在jq之后*/
<script src="//cdn.staticfile.org/jquery/3.4.1/jquery.min.js"></script>
<script src="//cdn.staticfile.org/jquery.pjax/2.0.1/jquery.pjax.min.js"></script>

三、添加pjax设置和一些函数的重载，三个重载函数有需的再加上，添加位置和上一步一样；

<script>
$(document).pjax('a[href^="<?php Helper::options()->siteUrl()?>"]:not(a[target="_blank"], a[no-pjax])', '#content', {fragment:'#content', timeout:5000});//只在本站链接启用pjax，加_blank跳转的（外部）链接和no-pjax标签的链接不启用
$(document).on('submit', 'form', function (event) {$.pjax.submit(event, '#content', {fragment:'#content', timeout:5000});});//支持submit和form标签，一般是提交评论等操作
$(document).on('pjax:send', function() {  $(".pjax_loading").css("display", "block");});//过渡动画开始
$(document).on('pjax:complete', function() { 
$(".pjax_loading").css("display", "none");//过渡动画结束
if (typeof aplayers !== 'undefined'){loadMeting();} //Aplayer播放器重载
if (typeof hljs !== 'undefined'){document.querySelectorAll('pre code').forEach((block) => { hljs.highlightBlock(block);});} //highlight代码高亮重载
if (typeof _hmt !== 'undefined'){_hmt.push(['_trackPageview', location.pathname + location.search]);} //百度统计重载          
});
</script>

四、排查错误，鉴于每个主题及使用的插件不同，对pjax的兼容性也不同，本站在启用后，发现Aplayer播放器和highlight代码高亮插件在pjax加载后不显示，需要刷新才显示，这时需要在上一步中pjax:complete加载完成后的回调函数中对其进行重载。

还有一些js加载也出现问题，比如外链自动新窗口打开的js、js加载的评论样式、，最简单粗暴的办法就是把原本在footer标签加载的js放到pjax容器content中；

另外一些点击事件也会失效，比如本站打赏js使用的是匿名函数，如：

$('#id').on('click', function()
{
    ...
});

改成元素绑定事件即可修复：

<div id='id' onclick='myClick()'></div>
<script text='javascript/text'>
function myClick()
{
    ...
}
</script>

到此pjax的改造结束，如发现错误还请帮忙指出。

参考文章：
typecho博客实现pjax
pjax(InstantClick)常用的重载函数
pjax 局部刷新后js事件失效

当前页面是本站的「Google AMP」版。查看和发表评论请点击：完整版 »