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

2019-05-14T17:10:00

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

当前页面是本站的「Baidu MIP」版。发表评论请点击:完整版 »