jquery.pjax是一个基于jQuery的插件,用于实现无刷新页面加载的技术。它利用了HTML5中的pushState和replaceState方法来实现局部页面刷新,从而在页面加载新内容时不需要完全刷新整个页面。这种技术通常被称为"局部页面刷新"或者"无刷新加载"
引入js:
<script src="/jquery.min.js" type="text/javascript"></script>
<script src="/jquery.pjax.js" type="text/javascript"></script>
PS:JQ引入网站主题(下载包)
配置pjax
PS:预加函数pjax前加载逻辑,回调函数pjax加载后逻辑
适配容器
<div id="wrap">
<!-- 页面内容 -->
</div>
PS:pjax加载内容区域属性值id="wrap"包裹
适配loader
<div class="loader">
<div class="loader-item"></div>
<div class="loader-item"></div>
<div class="loader-item"></div>
</div>
PS:加载动画html
样式loader
.loader {
display:none
}
.loader {
width: 100px;
height: 100px;
border-radius: 50%;
perspective: 800px;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.loader .loader-item {
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
}
.loader .loader-item:nth-child(1) {
border-bottom: 6px solid #f13a8f;
transform: rotateX(35deg) rotateY(-45deg);
animation: rotate-one 1s linear infinite;
}
.loader .loader-item:nth-child(2) {
border-right: 6px solid #4bc8eb;
transform: rotateX(50deg) rotateY(10deg);
animation: rotate-two 1s linear infinite;
}
.loader .loader-item:nth-child(3) {
border-top: 6px solid #36f372;
transform: rotateX(35deg) rotateY(55deg);
animation: rotate-three 1s linear infinite;
}
@keyframes rotate-one {
to {
transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
}
}
@keyframes rotate-two {
to {
transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
}
}
@keyframes rotate-three {
to {
transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
}
}
PS:加载动画css样式
PJAX允许你通过AJAX加载新的页面内容,同时会更新浏览器的URL和浏览历史,但不会重新加载整个页面。这样可以提升用户体验,因为页面变化时没有明显的刷新闪烁,同时可以节省带宽和加快页面加载速度。
广告插入