So verwenden Sie Pjax zur Seitenbeschleunigung in Laravel-Anwendungen-Laravel-php.cn

So verwenden Sie Pjax zur Seitenbeschleunigung in Laravel-Anwendungen

藏色散人

Freigeben： 2021-06-26 09:05:01

nach vorne

1811 Leute haben es durchsucht

Hinweis: PHPHub verwendet Pjax, um das Laden von Webseiten zu beschleunigen.

Verwandte Empfehlungen: „Laravel-Tutorial“

Was ist Pjax?

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

Nach dem Login kopieren

Siehe hier für das Projekt Adresse, offizielle Einführung:

pushState + ajax = pjax

Eine ausführliche Erklärung finden Sie in dieser Frage auf Zhihu oder überprüfen Sie die Informationen selbst.

Eine einfache Beschreibung, d. h. mit ajax</ code>-Technologie Gehen Sie zum Server, um das Dokument abzurufen, aktualisieren Sie die aktuelle Seite, ohne die Browserseite zu aktualisieren, und stellen Sie sicher, dass <code>js und css der Seite sind Assets Die Datei wird nicht wiederholt geladen. Anschließend wird die vom Browser bereitgestellte Funktion pushState verwendet, um die URL zu aktualisieren und sicherzustellen, dass der Benutzer durch Klicken zur historischen Seite zurückkehren kann ajax 技术去服务器获取文档, 在不刷新浏览器页面的情况下, 更新当前页面, 并且能保证页面的js 和 css 等 assets 文件不会被重复加载, 然后利用浏览器提供的 pushState 功能, 对 URL 进行更新, 并能保证用户通过点击 back 按钮回溯到历史页面.

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

为什么要使用 Pjax

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

服务端安装 `rcrowe/Turbo`

使用 package rcrowe/Turbo .

安装 `rcrowe/Turbo`#

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

"rcrowe/turbo": "0.2.*"

Nach dem Login kopieren

然后 composer update 或者 composer install

配置 `Providers`#

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

"Turbo\Provider\Laravel\TurboServiceProvider",

Nach dem Login kopieren

下载 pjax.js

在 publicjs 文件夹下

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

Nach dem Login kopieren

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

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

Nach dem Login kopieren

最后页面里调用:

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

Nach dem Login kopieren

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

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

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

添加加载动画#

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

添加 `nprogress`#

使用 rstacruz/nprogress 来实现.

添加的方法是下载文件, 然后把 nprogress.js 和 nprogress.css

Hinweis:< /strong> Informationen zur Browserkompatibilität finden Sie hier. Für den Zugriff wird automatisch die ursprüngliche Browsermethode verwendet id="Warum Pjax verwenden">Warum Pjax verwenden

Weil nicht die gesamte Seite aktualisiert werden muss und die Assets-Dateien nicht neu geladen werden müssen, was die Ladegeschwindigkeit erheblich verbessert die Seite.