使用全局无刷新效果可以让页面在点击“_self”链接跳转时不刷新本页面，背景音乐、视频等不会因为跳转而停止播放，省去了浏览器重载，页面响应也会相应地提升。下面直接上代码！
首先是头部引入：
<!--Pjax无刷新引入，放在<body>标签后-->
<script src="//cdn.bootcdn.net/ajax/libs/jquery.pjax/2.0.1/jquery.pjax.js"></script>
<div id="pjaxPage">
<!--end Pjax无刷新引入，放在<body>标签后-->接下来是底部效果：
<!--Pjax无刷新引入，放在底部</body>标签前-->
<script>
$(function() {
$(document).pjax('a[target!=_blank]', '#pjaxPage', {fragment:'#pjaxPage', timeout:6000});
$(document).on('pjax:send', function() {
$('#pjaxLoading').show();
});
$(document).on('pjax:complete', function() {
$('#pjaxLoading').hide();
});
});
</script>
</div>
<!--end Pjax无刷新引入,放在头部</body>标签前-->接下来是加载动画部分，添加在任意位置，推荐放在无刷新底部引入代码之上：
<!--Loading动画-->
<link rel="stylesheet" type="text/css" href="/pjaxLoading.css">
<div id="pjaxLoading" style="display: none;">
<div class="loading_frame">
<div class="loader_overlay"></div>
<div class="loader_cogs">
<div class="loader_cogs__top">
<div class="top_part"></div>
<div class="top_part"></div>
<div class="top_part"></div>
<div class="top_hole"></div>
</div>
<div class="loader_cogs__left">
<div class="left_part"></div>
<div class="left_part"></div>
<div class="left_part"></div>
<div class="left_hole"></div>
</div>
<div class="loader_cogs__bottom">
<div class="bottom_part"></div>
<div class="bottom_part"></div>
<div class="bottom_part"></div>
<div class="bottom_hole"></div>
</div>
</div>
</div>
</div>
<!--end Loading动画-->Tips：加载动画需要引入一下静态文件，如果添加后加载时没有动画，请检查动画css是否已加载成功！
1.众筹资源类型需用户参与众筹，且众筹团购人数达标后才可使用该资源；
2.一旦成功发起、参与众筹、团购后即获得该资源预使用权，无法进行退款；
本站仅作为虚拟资源团购、众筹开源项目发布，团购资金由用户自愿承担，已众筹完毕资源暂不对众筹会员以外的用户开放；本站资源均为正版、原版原著渠道，非团购会员或未参与团购的用户无法使用；资源、作品著作权均未作修改，使用权归本站团购用户所有。
OJBK云资源 » 给你的网站添加Pjax全局无刷新效果，付一个加载齿轮动画，提升用户体验必备
2.一旦成功发起、参与众筹、团购后即获得该资源预使用权，无法进行退款；
本站仅作为虚拟资源团购、众筹开源项目发布，团购资金由用户自愿承担，已众筹完毕资源暂不对众筹会员以外的用户开放；本站资源均为正版、原版原著渠道，非团购会员或未参与团购的用户无法使用；资源、作品著作权均未作修改，使用权归本站团购用户所有。
OJBK云资源 » 给你的网站添加Pjax全局无刷新效果，付一个加载齿轮动画，提升用户体验必备
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用？
- 本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了？
- 找不到素材资源介绍文章里的示例图片？
- 不会搭建？
