给你的网站添加Pjax全局无刷新效果，付一个加载齿轮动画，提升用户体验必备

显示全部楼层 · 2020-6-17 23:00:57

请点击此处下载

查看状态：已购买或有权限

您的用户组是：游客

文件名称：提取密码：s96i
下载次数：38 文件大小：2 KB
下载权限： 不限及以上 [开通VIP免费下载] [余额充值]

使用全局无刷新效果可以让页面在点击“_self”链接跳转时不刷新本页面，背景音乐、视频等不会因为跳转而停止播放，省去了浏览器重载，页面响应也会相应地提升。下面直接上代码！

先是head头部部分：

[HTML] 纯文本查看 复制代码

<!--Pjax无刷新引入，放在<body>标签后-->
<script src="//cdn.bootcdn.net/ajax/libs/jquery.pjax/2.0.1/jquery.pjax.js"></script>
<div id="pjaxPage">
<!--end Pjax无刷新引入，放在<body>标签后-->

接下来是底部：

[HTML] 纯文本查看 复制代码

<!--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>标签前-->

接下来是加载动画部分，添加在任意位置，推荐放在无刷新底部引入代码之上：

[HTML] 纯文本查看 复制代码

<!--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是否已加载成功！

Miracle · 2020-7-10 12:35:28

GM没权利下载?

给你的网站添加Pjax全局无刷新效果，付一个加载齿轮动画，提升用户体验必备

相关帖子