笔记 内容:30

pjax实现网站无刷新加载页面内容

  • 查看作者
  • 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和浏览历史,但不会重新加载整个页面。这样可以提升用户体验,因为页面变化时没有明显的刷新闪烁,同时可以节省带宽和加快页面加载速度。

    请登录之后再进行评论

    登录
    最新评论
    0U币
    已有6324人浏览, 浏览收益0, 礼物收益0, 打赏收益0, 点赞收益0, 广告收益0, 获得总收益0U币
    也可开通会员全场文章免费看
    免费教程