给你的网站添加Pjax全局无刷新效果，付一个加载齿轮动画，提升用户体验必备
使用全局无刷新效果可以让页面在点击“_self”链接跳转时不刷新本页面，背景音乐、视频等不会因为跳转而停止播放，省去了浏览器重载，页面响应也会相应地提升。下面直接上代码！先是head头部部分：<!--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', '#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是否已加载成功！
GM没权利下载?
页:
[1]