在Laravel应用中如何使用pjax进行页面加速

2022-05-15 0 305

说明:PHPHub 使用 pjax 来加速网页的加载, 这篇文章是在开发完此功能后做的笔记.

相关推荐:《laravel教程》

什么是 Pjax

        .--.       /    \\      ## a  a      (   '._)       |'-- |     _.\\___/_   ___pjax___   ."\\> \\Y/|<'.  '._.-'  /  \\ \\_\\/ /  '-' /  | --'\\_/|/ |   _/  |___.-' |  |`'`    |     |  |    |    / './   /__./` | |      \\   | |       \\  | |       ;  | |       /  | | jgs  |___\\_.\\_      `-"--'---'

项目地址见 这里, 官方的介绍:

pushState + ajax = pjax

详细的解释请看 知乎上的这个问题, 或者自己去查阅资料.

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

注意: 并不是所有浏览器都支持 pushState, 关于浏览器的兼容请见这里, 当浏览器不兼容的时候, 会自动使用原始的浏览方式进行访问.

为什么要使用 Pjax

因为不需要整个页面刷新, 并且 assets 文件都不需要重新加载, 很大程度上提高了页面的加载速度.

服务端安装 rcrowe/Turbo

使用 package rcrowe/Turbo .

安装 rcrowe/Turbo#

composer.json 里的 require 属性下添加:

"rcrowe/turbo": "0.2.*"

然后 composer update 或者 composer install

配置 Providers#

编辑 app/config/app.php 文件, 在选项 providers 数组里面添加:

"Turbo\\Provider\\Laravel\\TurboServiceProvider",

下载 pjax.js

public\\js 文件夹下

wget https://raw.github.com/defunkt/jquery-pjax/master/jquery.pjax.js

然后在模版里面加载此文件

<script src="{{ cdn('js/jquery.pjax.js') }}"></script>

最后页面里调用:

$(document).ready(function(){    $(document).pjax('a', 'body');});

上面的代码解释是, 把所有的 a 标签的点击事件截获, 如果当前浏览器支持 pjax 的话, 发送一个 ajax 请求, 并把参数_pjax=body 带过去.

如果一起顺利的话, 在 Chrome 的 debuger 里能看到类似于这样的请求:

在Laravel应用中如何使用pjax进行页面加速

至此, 已经顺利配置完毕.

添加加载动画#

接下来要来添加一个页面加载的动画, 效果如下:

在Laravel应用中如何使用pjax进行页面加速

添加 nprogress#

使用 rstacruz/nprogress 来实现.

添加的方法是 下载 文件, 然后把 nprogress.jsnprogress.css 添加到页面中:

    <script src='nprogress.js'></script>    <link rel='stylesheet' href='nprogress.css'/>

调用#

修改上面的代码, 修改后的代码如以下:

$(document).ready(function(){    $(document).pjax('a', 'body');    $(document).on('pjax:start', function() {      NProgress.start();  });  $(document).on('pjax:end', function() {      NProgress.done();      self.siteBootUp();  });});

这样的话, 每一次点击页面的时候就会有很酷炫的效果了

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

【声明:根据2013年1月30日《计算机软件保护条例》2次修订第17条规定: 为了学习和研究软件内含的设计思想和原理,通过安装、显示、传输或者存 储软件等方式使用软件的,可以不经软件著作权人许可,不向其支付报酬! 鉴于此,也希望大家按此说明研究软件!】
本站所有源码尽量保证原汁原味,如有特殊情况会作出声明及标注,网站资源不做任何二次加密(原版加密除外,不影响程序使用的不会做解密处理),方便您更好的学习参考。 在您的能力范围内,为了大环境的良性发展,请尽可能的选择正版资源。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。

即刻码站__国内靠谱的站长资源下载平台 php教程 在Laravel应用中如何使用pjax进行页面加速 https://www.jike1995.com/35836.html

常见问题
  • 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用
查看详情
  • 最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度
查看详情

相关文章

发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务