简单实现网站pjax无刷新加载 - 小浣熊博客

简单实现网站pjax无刷新加载

发布者: 小浣熊

全网最全的网络资源分享网站

手机扫码查看

特别声明:文章多为网络转载,资源使用一般不提供任何帮助,特殊资源除外,如有侵权请联系!

这篇文章总字数为:905 字,有 0 张图存于本站服务器

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>

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

分享到:
打赏
-版权声明-

阅读时间:  发布于:2020-5-26
文章标题:《简单实现网站pjax无刷新加载》
本文链接:https://www.mua222.cn/175.html
本文编辑: 小浣熊,转载请注明超链接和出处小浣熊博客
收录状态:[百度已收录][360未收录][搜狗已收录]

评论

     快速回复: 支持 感谢 学习 不错 高兴 给力 加油 惊喜
切换注册

登录

忘记密码?

您也可以使用第三方帐号快捷登录

切换登录

注册

简单实现网站pjax无刷新加载

长按图片转发给朋友

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏