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

工作了才发现时间是可以过得这么快,还有两个月就工作一年了。日复一日,似乎周一开始上班,周五(周末?)下班两个时间点才比较有时间感。刚出来工作,大部分时间都得围绕着工作转悠,工作用的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事件失效

标签: Typecho 大扫除 pjax

已有 27 条评论

  1. 博主该更新了 huaji.png

  2. pjax的体验确实不错!

  3. 又长草了。。

    1. 最近会除除 pao.gif

      1. quan.png 我换域名了 把友链换一下吧
        换成 acg.blue

  4. 咱来帮你除除草! gan.png

    1. 又养了一波,可以除了 gan.png

  5. 好像pjax并没生效?

    1. 评论部分还有点问题

  6. 写的很好,支持一下

    1. 多多交流 huaji.png

  7. 也不经常更新博客了。 jingya.png

    1. 鸽变常态 pao.gif

  8. Sakura Sakura

    看看是啥样的

  1. 1
  2. 2
选择表情