pjax demo 使用教程基于tp5 pjax demo

<style>

    .spinner {
        width: 150px;
        text-align: center;
        /*display: none;*/
    }

    .spinner > div {
        width: 30px;
        height: 30px;
        background-color: #67CF22;

        border-radius: 100%;
        display: inline-block;
        -webkit-animation: bouncedelay 1.4s infinite ease-in-out;
        animation: bouncedelay 1.4s infinite ease-in-out;
        /* Prevent first frame from flickering when animation starts */
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
    }

    .spinner .bounce1 {
        -webkit-animation-delay: -0.32s;
        animation-delay: -0.32s;
    }

    .spinner .bounce2 {
        -webkit-animation-delay: -0.16s;
        animation-delay: -0.16s;
    }

    @-webkit-keyframes bouncedelay {
        0%, 80%, 100% { -webkit-transform: scale(0.0) }
        40% { -webkit-transform: scale(1.0) }
    }

    @keyframes bouncedelay {
        0%, 80%, 100% {
            transform: scale(0.0);
            -webkit-transform: scale(0.0);
        } 40% {
              transform: scale(1.0);
              -webkit-transform: scale(1.0);
          }
    }
</style>

    <div class="spinner">
        <div class="bounce1"></div>
        <div class="bounce2"></div>
        <div class="bounce3"></div>
    </div>
<script type="text/javascript">
    $(document).on('pjax:send', function() { //pjax链接点击后显示加载动画；
        $(".spinner").css("display", "block");
    });

    $(document).on('pjax:complete', function() { //pjax链接加载完成后隐藏加载动画；
        $(".spinner").css("display", "none");
    });
    $(document).pjax('.pjax,.pagination a,.pjax2', '#container', {fragment:'#container', timeout:8000});
</script>

请注意如果使用的是tp5 框架，它默认返回的html结构是json 需要在配置项里面修改为html:

// 默认AJAX 数据返回格式,可选json xml ...  [ todo 这里默认是 json 由于后台采用 pjax 需要接收的是html]

'default_ajax_return'    => 'html',

　pjax 引用官方地址

<script src="https://pjax.herokuapp.com/jquery.pjax.js"></script>