什么是pjax?不是ajax吗?
pjax是jquery的一个插件,它使用ajax和pushState两个技术改善用户的网页浏览体验。简单来说,就是用户点击a标签切换页面的时候,只是局部刷新的技术。
pjax发生过程是怎样的?
首先就是用户通过a标签发送一个ajax请求到服务端,之后服务端收到请求返回需要更新的html前端片段代码,然后客户端接受到数据之后就插入到需要更新的地方,待页面完善后,pushstate就会更新当前页面的url。
pjax好处:
按需加载–>只会加载当前请求所需要的html片段,无需再次解析css和js,再次渲染;
怎么操作?
引入相关js文件:
可放在头部或者尾部,需要注意的是js引入顺序,因为pjax是jquery的插件,所以必须先有jquery再有pjax。还有就是pjax 1.9.6版本应配合jq2..版本使用,否则无法正常工作。如果要使用jq3..版本,应使用pjax2.0.1以上版本。
加上pjax代码:
解释一下哈~
selector 用于绑定pjax事件,一般的为:”a”, 如果要去掉一些外连的URL, 这里的selector可以为: “a[href^=’https://www.jefsky.com‘]”
[container] 就是内容变换容器,就是需要更新html的区域,如: ‘#pjax-content’。那么页面就只刷新的这个部分。
options 官方文档提供了更多的选项,以便更好地自定义选项。具体查考官方文档https://github.com/defunkt/jquery-pjax。下面是一些比较常用的:
container 替换的容器的css选择器。填你的替换容器ID即可。
timeout 超时就会被迫页面就会完全刷新,单位毫秒。
fragment 这个作为整个pjax框架,必须写上。
以本站为例,代码如下:
<script>
// pjax
$(document).pjax('a[href^="<?php Helper::options()->siteUrl()?>"]:not(a[target="_blank"], a[no-pjax])', {
container: '#kratos-blog-post',
fragment: '#kratos-blog-post',
timeout: 8000
})
</script>
当然你也可以加些等候动画等等:
<div style="display:none; z-index:9999; background-color: #ccc; position:fixed; top:0px; width:100%; height:100vh;" class="pjax_loading">
<script>
$(document).on('pjax:send', function() { //pjax链接点击后显示加载动画;
//$(".pjax_loading").css("display", "block");});
$(document).on('pjax:complete', function() { //pjax链接加载完成后隐藏加载动画;
//$(".pjax_loading").css("display", "none");
</script>
发表回复