search
HomePHP FrameworkLaravelHow to use pjax for page acceleration in Laravel applications

Note: PHPHub uses pjax to speed up the loading of web pages. This article is a note made after developing this function.

Related recommendations: "laravel tutorial"

What is Pjax

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

The project address is here, the official introduction:

pushState ajax = pjax

For detailed explanation, please see Regarding this problem, or you can check the information yourself.

To describe it simply, it is to use ajax technology to get the document from the server, and update the current page without refreshing the browser page. , and can ensure that the js and css and other assets files of the page will not be loaded repeatedly, and then use the pushState function provided by the browser , updates the URL, and ensures that users can go back to the historical page by clicking the back button.

Note: Not all browsers support pushState, regarding browser compatibility Please see here. When the browser is incompatible, it will automatically use the original browsing method for access.

Why use Pjax

Because there is no need to refresh the entire page, and assets No files need to be reloaded, which greatly improves the loading speed of the page.

Server-side installation rcrowe/Turbo

Use package rcrowe/Turbo .

Installation rcrowe/Turbo

#Add under the require attribute in composer.json:

"rcrowe/turbo": "0.2.*"

Then composer update or composer install

Configuration Providers

#Edit app/config/app.php file, add in the options providers array:

"Turbo\Provider\Laravel\TurboServiceProvider",

Download pjax.js

In public\js Under the folder

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

Then load this file in the template

<script src="{{ cdn(&#39;js/jquery.pjax.js&#39;) }}"></script>

Call on the last page:

$(document).ready(function(){    $(document).pjax(&#39;a&#39;, &#39;body&#39;);});

The above code explanation is to put all Intercept the click event of the a tag. If the current browser supports pjax, send an ajax request and bring the parameter _pjax=body.

If If all goes well, you can see a request similar to this in Chrome's debuger:

At this point, the configuration has been successfully completed.

Add loading animation

# Next we need to add a page loading animation, the effect is as follows:

Add nprogress

# Use rstacruz/nprogress to achieve.

The way to add is to download the file, and then add nprogress.js and nprogress.css to the page:

    <script src=&#39;nprogress.js&#39;></script>    <link rel=&#39;stylesheet&#39; href=&#39;nprogress.css&#39;/>

Call

#Modify the above code. The modified code is as follows:

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

In this case, there will be a cool effect every time you click on the page

The above is the detailed content of How to use pjax for page acceleration in Laravel applications. For more information, please follow other related articles on the PHP Chinese website!

Statement
This article is reproduced at:cnblogs. If there is any infringement, please contact admin@php.cn delete
laravel单点登录方法详解laravel单点登录方法详解Jun 15, 2022 am 11:45 AM

本篇文章给大家带来了关于laravel的相关知识,其中主要介绍了关于单点登录的相关问题,单点登录是指在多个应用系统中,用户只需要登录一次就可以访问所有相互信任的应用系统,下面一起来看一下,希望对大家有帮助。

一起来聊聊Laravel的生命周期一起来聊聊Laravel的生命周期Apr 25, 2022 pm 12:04 PM

本篇文章给大家带来了关于laravel的相关知识,其中主要介绍了关于Laravel的生命周期相关问题,Laravel 的生命周期从public\index.php开始,从public\index.php结束,希望对大家有帮助。

laravel中guard是什么laravel中guard是什么Jun 02, 2022 pm 05:54 PM

在laravel中,guard是一个用于用户认证的插件;guard的作用就是处理认证判断每一个请求,从数据库中读取数据和用户输入的对比,调用是否登录过或者允许通过的,并且Guard能非常灵活的构建一套自己的认证体系。

laravel中asset()方法怎么用laravel中asset()方法怎么用Jun 02, 2022 pm 04:55 PM

laravel中asset()方法的用法:1、用于引入静态文件,语法为“src="{{asset(‘需要引入的文件路径’)}}"”;2、用于给当前请求的scheme前端资源生成一个url,语法为“$url = asset('前端资源')”。

实例详解laravel使用中间件记录用户请求日志实例详解laravel使用中间件记录用户请求日志Apr 26, 2022 am 11:53 AM

本篇文章给大家带来了关于laravel的相关知识,其中主要介绍了关于使用中间件记录用户请求日志的相关问题,包括了创建中间件、注册中间件、记录用户访问等等内容,下面一起来看一下,希望对大家有帮助。

laravel中间件基础详解laravel中间件基础详解May 18, 2022 am 11:46 AM

本篇文章给大家带来了关于laravel的相关知识,其中主要介绍了关于中间件的相关问题,包括了什么是中间件、自定义中间件等等,中间件为过滤进入应用的 HTTP 请求提供了一套便利的机制,下面一起来看一下,希望对大家有帮助。

laravel的fill方法怎么用laravel的fill方法怎么用Jun 06, 2022 pm 03:33 PM

在laravel中,fill方法是一个给Eloquent实例赋值属性的方法,该方法可以理解为用于过滤前端传输过来的与模型中对应的多余字段;当调用该方法时,会先去检测当前Model的状态,根据fillable数组的设置,Model会处于不同的状态。

laravel路由文件在哪个目录里laravel路由文件在哪个目录里Apr 28, 2022 pm 01:07 PM

laravel路由文件在“routes”目录里。Laravel中所有的路由文件定义在routes目录下,它里面的内容会自动被框架加载;该目录下默认有四个路由文件用于给不同的入口使用:web.php、api.php、console.php等。

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
2 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
Repo: How To Revive Teammates
1 months agoBy尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: How To Get Giant Seeds
4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

Hot Tools

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

Integrate Eclipse with SAP NetWeaver application server.

EditPlus Chinese cracked version

EditPlus Chinese cracked version

Small size, syntax highlighting, does not support code prompt function

Dreamweaver Mac version

Dreamweaver Mac version

Visual web development tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

VSCode Windows 64-bit Download

VSCode Windows 64-bit Download

A free and powerful IDE editor launched by Microsoft