快捷导航
收起左侧

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

[复制链接]
查看: 1409|回复: 1
  • TA的每日心情
    奋斗
    2020-8-6 16:03
  • 签到天数: 5 天

    连续签到: 1 天

    [LV.2]偶尔看看I

    发表于 2020-6-17 23:00:57 | 显示全部楼层 |阅读模式
    <
    1.jpg

    请点击此处下载

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

    您的用户组是:游客

    提取密码/文件名称:提取密码:s96i 
    下载次数:32  文件大小: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是否已加载成功!


    下载心急但严禁灌水,累计灌水达到5次以上将会禁言哦~

    该用户从未签到

    发表于 2020-7-10 12:35:28 | 显示全部楼层
    GM没权利下载?

    收起回复
    • Miracle : 我没开会员都能下
      2020-7-11 18:13| 回复
    • 我也说一句
    下载心急但严禁灌水,累计灌水达到5次以上将会禁言哦~

    本版积分规则

    精彩推荐

    [影视APP]五级分销版全网VIP影视APP源码,

    2019-01-19 APP源码

    [影视双端]无限代理版全网VIP影视APP源码,

    2018-12-12 精选资源

    [特别有意思]兴奋的文学:青龙季,看看新来

    2019-09-14 修仙之道

    [影视双端]双端影视APPV3全新后台,下载页

    2019-06-29 APP源码

    [双端影视]影视双端APP带商城系统,全新后

    2019-06-18 APP源码

    [影视双端主题]无限代理版星空极简双端H5前

    2019-03-05 精选资源

    [影视双端]360影视双端H5源码,ThinkPHP新

    2019-06-26 APP源码

    [双端盒子]影视双端直播盒子源码,自定义资

    2019-08-20 APP源码

    喜欢给你阳光,让你充满活力!

    • 反馈建议:2327299920@qq.com
    • 工作时间:周一~周五

    云服务支持

    精彩内容,快速检索

    关注我们

    Copyright© 盒子云 - 你笑起来真好看~  Powered by Discuz!    ( 蜀ICP备18033287号-3 )