简单的给网站加上pjax无刷新加载

pjax是什么?

简单点描述, 就是利用 ajax 技术去服务器获取文档, 在不刷新浏览器页面的情况下, 更新当前页面, 并且能保证页面的 jscss 等文件不会被重复加载, 然后利用浏览器提供的 pushState 功能, 对 URL 进行更新, 并能保证用户通过点击 back 按钮回溯到历史页面.

为什么要用pjax?

pjax可以带来更好的体验 加载新的页面无需重新去加载css js 让网站速度更快 ,因为不需要整个页面刷新,很大程度上提高了页面的加载速度.

怎么使用pjax?

这个使用的方法是非常简单的
首先调用jQuerypjax 包装代码
别的也不整了 直接上代码
在网站的 head 双标签内加入以下资源引入代码:

<script type="text/javascript" src="https://cdn.gqink.cn/jQuery/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.gqink.cn/jQuery/jquery.pjax.min.js"></script>

下一步,就是在 </body> 标签前,添加下面代码
也就是网站的footer底部

<script type="text/javascript">
    //这里的#id代码局部刷新的内容
    $(document).pjax('a[target!=_blank]', '#id', {fragment: '#html',timeout: 8000});
        $(document).on('pjax:send', function() {
        //$('#loading').show(); // 将#loading的内容显示 加载动画
    });
    $(document).on('pjax:complete', function() {
        //$('#loading').hide(); // 将#loading的内容隐藏 加载动画
        //页面刷新后有些函数没有调用在这里可以写上你的函数让他重新加载
    });
</script>

加载动画这里就不整了 自己研究研究 加个表情写个动画就行

© 版权声明
THE END
喜欢就支持一下吧
赞赏
评论 抢沙发
头像
欢迎您留下宝贵的见解!对于“评论可见”,请合理评论,否则将被系统视为垃圾评论。
提交
头像

昵称

取消
昵称表情代码图片

    暂无评论内容