2024年-元宵倒计时

9 天 9 时 9 分 9 秒


【技术分享】简单实现网站pjax无刷新加载

pjax是什么?

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

为什么要用pjax?

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

怎么使用pjax?

这个使用的方法是非常简单的

首先调用jQuery 跟 pjax 包装代码

别的也不整了 直接上代码

在网站的 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>

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




版权声明

1. 本网站名称: 安鹿轩

2. 本站永久网址: www.anlu1314.com

3. 本站提供的所有内容仅供学习、交流和分享用途,只供参考。

4. 本站资源禁止并谢绝未经本站许可的使用,如欲转载,请署名以及注明出处。

5. 本站(原创)文章、资源、图片等所有内容,一经转载,即表示您已经接受上述声明!需自行承担一切风险与责任!

6. 关于本站的所有留言评论与转载、引用文纯属文字原作者个人观点,与本站观点及立场无关!

7. 有任何侵权问题请联系E-mail [email protected]

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
今日签到
搜索