在 Laravel 应用中使用 pjax 进行页面加速
说明#
PHPHub 使用 pjax 来加速网页的加载, 这篇文章是在开发完此功能后做的笔记.
什么是 Pjax#
.--./ \## a a( '._)|'-- |_.\___/_ ___pjax___."\> \Y/|<'. '._.-'/ \ \_\/ / '-' /| --'\_/|/ | _/|___.-' | |`'`| | || / './/__./` | |\ | |\ | |; | |/ | |jgs |___\_.\_`-"--'---'
项目地址见 这里, 官方的介绍:
pushState + ajax = pjax
详细的解释请看 知乎上的这个问题, 或者自己去查阅资料.
简单点描述, 就是利用 ajax
技术去服务器获取文档, 在不刷新浏览器页面的情况下, 更新当前页面, 并且能保证页面的js
和 css
等 assets
文件不会被重复加载, 然后利用浏览器提供的 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 里能看到类似于这样的请求:
至此, 已经顺利配置完毕.
添加加载动画#
接下来要来添加一个页面加载的动画, 效果如下:
添加 nprogress
#
使用 rstacruz/nprogress 来实现.
添加的方法是 下载 文件, 然后把 nprogress.js
和 nprogress.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(); }); });
这样的话, 每一次点击页面的时候就会有很酷炫的效果了
转载于:https://www.cnblogs.com/telwanggs/p/7136776.html
在 Laravel 应用中使用 pjax 进行页面加速相关推荐
- php辅助框架,【PHP开发框架】Laravel框架中辅助函数:optional ()函数的介绍
laravel框架中的辅助函数有很多,那么,在 Laravel 新版本中又有什么非常好用的辅助函数呢?接下来的这篇文章中,ki4网将给大家介绍一个非常有用的辅助方法:optional()函数,这个函数 ...
- laravel api_如何在现有的Laravel应用中获取即时GraphQL API
laravel api by Karthikeya Viswanath 通过Karthikeya Viswanath 如何在现有的Laravel应用中获取即时GraphQL API (How to g ...
- 关于laravel模板中生成URL的几种模式总结
1.通过url辅助函数(路由)生成: ? 1 location.href = "{{url('user/index2')}}"; 或者: ? 1 location.href = & ...
- Laravel的中大型项目构架
初学者学习Laravel时分两种,一种是乖乖的将程序填入MVC构架内,导致controller与model异常的肥大,日后一样很难维护:一种是常常不知道程序该写在哪一个class内而犹豫不决,毕竟传统 ...
- canvas java 上传截图_在Vue项目中使用html2canvas生成页面截图并上传
使用方法 项目中引入 npm install html2canvas html代码 //html代码 js代码 // 引入html2canvas import html2canvas from 'ht ...
- android使用webview上传文件,Android项目中如何在webview页面中上传文件
Android项目中如何在webview页面中上传文件 发布时间:2020-11-26 15:56:27 来源:亿速云 阅读:68 作者:Leah 本篇文章为大家展示了Android项目中如何在web ...
- react 错误边界_React with GraphQL和错误边界中的自定义错误页面
react 错误边界 by Abi Noda 通过Abi Noda React with GraphQL和错误边界中的自定义错误页面 (Custom error pages in React with ...
- 深入浅出经典面试题:从浏览器中输入URL到页面加载发生了什么 - Part 3
备注: 因为文章太长,所以将它分为三部分,本文是第三部分. 第一部分:深入浅出经典面试题:从浏览器中输入URL到页面加载发生了什么 - Part 1 第二部分:深入浅出经典面试题:从浏览器中输入URL ...
- django中的缓存 单页面缓存,局部缓存,全站缓存 跨域问题的解决
django中的缓存 单页面缓存,局部缓存,全站缓存 跨域问题的解决 参考文章: (1)django中的缓存 单页面缓存,局部缓存,全站缓存 跨域问题的解决 (2)https://www.cnblog ...
最新文章
- mysql longtext可以存储多少文字_MySQL 四万字精华总结 + 面试100 问,和面试官扯皮绰绰有余(收藏系列)
- cnblogs-5个必须掌握的maven命令
- Deep Learning论文笔记之(一)K-means特征学习
- spark教程python案例_Spark实战(四)spark+python快速入门实战小例子(PySpark)
- ShellExecute 函数的用法和实例
- jquery autocomplete的使用
- 2021年11月国产数据库排行榜:openGauss闯入前三,Kingbase流行度与日俱增,TDengine厚积薄发
- 中国首个!百度云宣布边缘计算开源,发布智能边缘开源平台OpenEdge
- 如何对酒店的固定资产进行日常管理?
- 码栈搭建自动化应用(可视化模式)
- 安师大计算机专业排名多少,安师大的计算机专业怎么样
- 图解快速排序(C++实现)
- 排序算法伪代码以及python实现——插入,归并,快速,堆,计数
- SSM Chapter 12 SpringMVC扩展和SSM框架整合
- 决策边界绘制函数plot_decision_boundary()和plt.contourf函数详解
- 百度地图WEB服务-逆地理编码使用心得
- 借势“双碳”目标东风,重塑股份全力推动氢燃料电池多场景应用
- JMeter(十三):借用Jmeter连接数据库 ,获取短信验证码
- 南京邮电大学网络信息安全——网络数据包捕获WireShark(实验一)
- keras神经风格迁移_深度神经风格迁移
热门文章
- HBase之MVCC
- MicroBlaze软核介绍
- mysql percona 密码设置_Percona mysql5.7 默认密码
- bat 复制文件夹_一个神奇的bat批处理文件,更好的隐藏电脑里的文件或者文件夹...
- 14. GD32F103C8T6入门教程-Systick定时器
- 8.FreeRTOS学习笔记-软件定时器
- LWIP初体验-修改ST官方demo
- python函数的使用方法图解_零基础python之4函数重用-函数与模块(附详细的步骤和程序)...
- 基于Flash的ECC纠错算法基本原理及软件C语言算法和硬件Verilog实现(PPT在主页可下载)
- php curl 批量,关于用php的curl批量抓取内容