Speed丨如何快速给网站添加Pjax?

V站今天在此做做笔记。

什么是Pjax

Pjax是一种很多网站( facebook,  twitter)都支持的浏览方式, 当你点击一个站内链接的时候, 不是做页面跳转, 而是只是站内页面刷新。设置后的这些网站的ajax刷新是支持浏览器历史的, 刷新页面的同时, 浏览器地址栏位上面的地址也是会更改, 用浏览器的回退功能也能够回退到上一个页面。Pjax是可以增加访客打分的好功能。

为何要添加此功能?

1.有助于提升访问质量。

2.极大地减小了服务器的资源消耗。

如何添加?

①  检查你的网站是否引入1.7.0版本以上的jquery.js,如果没有请全局引入。

引用格式:

  1. <script type="text/javascript" src="//lib.sinaapp.com/js/jquery/1.9.0/jquery.js"></script>

②编辑Footer(底部文件),添加此代码。

绑定本页面非新窗口打开的所有本域链接,链接点击后,替换contentleft容器内容为新内容contentleft,ajax超时时间8秒

  1. <script>
  2.     $(document).pjax('a[target!=_blank]', '#contentleft', {fragment:'#contentleft', timeout:8000});</script>

如果jq失效怎么办?

问题比如:pjax之后多说评论框不加载,ajax评论不能提交等等问题。

问题原因:原先容器绑定的事件被新容器替换掉了,新容器的div没有绑定事件,所以点击无效。

解决方法:利用pjax的加载完成回调函数,重新绑定事件。

例:

  1. <script>
  2. $(document).on('pjax:complete', function() {
  3.     pajx_loadDuodsuo();//pjax加载完成之后调用重载多说函数
  4. });
  5. function pajx_loadDuodsuo(){
  6. var dus=$(".ds-thread");
  7. if($(dus).length==1){
  8. var el = document.createElement('div');
  9. el.setAttribute('data-thread-key',$(dus).attr("data-thread-key"));//必选参数
  10. el.setAttribute('data-url',$(dus).attr("data-url"));
  11. DUOSHUO.EmbedThread(el);
  12. $(dus).html(el);
  13. }
  14. }
  15. </script>

汇总起来,就是下段:

  1. <script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.9.0/jquery.js"></script>
  2. <script type="text/javascript" src="//24bp.cn/mine/pjax.js"></script>
  3. <div class="pjax_loading"></div>
  4. <script>
  5. $(document).pjax('a[target!=_blank]', '#contentleft', {fragment:'#contentleft', timeout:8000});
  6. $(document).on('pjax:send', function() { //pjax链接点击后显示加载动画;
  7.     $(".pjax_loading").css("display", "block");
  8. });
  9. $(document).on('pjax:complete', function() { //pjax链接加载完成后隐藏加载动画;
  10.     $(".pjax_loading").css("display", "none");
  11.     pajx_loadDuodsuo();
  12. });
  13. function pajx_loadDuodsuo(){
  14. var dus=$(".ds-thread");
  15. if($(dus).length==1){
  16. var el = document.createElement('div');
  17. el.setAttribute('data-thread-key',$(dus).attr("data-thread-key"));//必选参数
  18. el.setAttribute('data-url',$(dus).attr("data-url"));
  19. DUOSHUO.EmbedThread(el);
  20. $(dus).html(el);
  21. }
  22. }
  23. </script>

Pjax这样就添加成功了!

WordPress如何添加Pjax?

WordPress最简单的全站Pjax教程,最简单wp主题设置pjax,就一个js调用修改一下js里的自定义内容的id属性就可以了,修改下面代码的page为你的id属性,注本文末有下载链接,下面代码只是自定义的那一部分要修改下载的,调用代码添加到主题页脚或页眉文件都可以。

Js自定义:

  • // 自定义
  • $(function() {
  • $(document).pjax('a[target!=_blank]', '#page', {fragment:'#page', timeout:6000});
  • $(document).on('pjax:send', function() {
  • $('#page').fadeTo(700,0.0);
  • });
  • $(document).on('pjax:complete', function() {
  • $('#page').fadeTo(700,1);
  • });
  • });

调用代码:

<script src="/路径/pjax.js"></script>

原文链接:https://24bp.cn/565.html

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏h5

支付宝小程序wcPop弹窗自定义插件dialog模板

最近由于项目需要,自己开发的支付宝小程序自定义弹窗插件wcPop,就抽空整理了一份demo,多种api调用,插件语法简洁优雅,可随意修改各种弹窗效果。

37910
来自专栏前端萌媛的成长之路

url、href和src区别

1.4K40
来自专栏崔庆才的专栏

腾讯云主机Python3环境安装PySpider爬虫框架过程

PhantomJS 是一个基于 WebKit 的服务器端 JavaScript API。它全面支持web而不需浏览器支持,其快速、原生支持各种Web标准:DOM...

1.4K10
来自专栏Python爬虫与算法进阶

Python爬虫进阶(一)使用Selenium进行网页抓取

萌新要学习Selenium了,安装是个坑。还要下载相关配件,可以参考python 安装selenium环境(https://my.oschina.net/hyp...

41350
来自专栏前端小叙

vue如何加入百度联盟广告

在百度联盟代码位管理中创建好对应的代码位之后,点击获取代码,会看到这样一段js ? 直接复制粘贴到自己网页中便可显示对应广告。 在vue中由于都是vue组件,不...

51780
来自专栏自由而无用的灵魂的碎碎念

解决每次从cmd进入sqlplus,都得重新设置pagesize、linesize的问题

如上图,经过测试,主要需要更改屏幕缓冲区大小,这里更改宽度为130。为防止每次进入cmd都调节窗口的大小,这里设置窗口大小,宽度为与缓冲区一致。

10520
来自专栏葡萄城控件技术团队

渐进式Web应用(PWA)入门教程(下)

渐进式Web应用程序需要使用HTTPS连接。虽然使用HTTPS会让您服务器的开销变多,但使用HTTPS可以让您的网站变得更安全,HTTPS网站在Google上的...

11400
来自专栏vue学习

4.vue-router之什么是嵌套路由

大家都知道选项卡,在选项卡中,顶部有数个导航栏,中间的主体显示的是内容;这个时候,整个页面是一个路由,然后点击选项卡切换不同的路由来展示不同的内容,这个时候就是...

11520
来自专栏奇梦博客

发帖UMEditor编辑器增加表情,附加表情包下载 PHP 配置 XiunoBBS

18450
来自专栏前端安全

前端调试入门

这里的控制台特指PC端浏览器进入开发者模式之后新打开的操作界面。常见的控制台有Chrome的控制台,Firefox的firebug。这些都能帮助我们调试前端问题...

1K330

扫码关注云+社区

领取腾讯云代金券