把pjax应用到此博客
2020-05-28
2 min read
pjax可以使网站局部加载,避免重复内容重新加载,减少网站加载量,也提高重复内容的连贯性。例如听歌不会切断,看板娘不会重载。
<div id="pjax-container">
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery.pjax/2.0.1/jquery.pjax.min.js"></script>
<script>
$(document).pjax('a', '#pjax-container',{fragment: '#pjax-container',timeout:"10000"})
</script>
'a'
意思是作用在全站的a标签跳转链接
第一个'#pjax-container'
是原网页要替换内容的标签的id,第二个fragment的属性'#pjax-container'
是目标网页的目标内容所在标签的id。一般应用时这两个id都写成一样,因为这样才能从目标网页跳转到原网页
timeout是如果到这个时间还没加载完成,则全局刷新,要设置大一点,避免全局刷新。
<script>
$(document).on('pjax:send',
function() {
$('#loader-wrapper').addClass("in");
})
$(document).on('pjax:complete',
function() {
$('#loader-wrapper').removeClass("in");
})
</script>