說明：PHPHub 使用pjax 來加速網頁的載入, 這篇文章是在開發完此功能後做的筆記.
相關推薦：《laravel教學》
.--.
/ \
## a a
( '._)
|'-- |
_.\___/_ ___pjax___
."\> \Y/|<'. '._.-'
/ \ \_\/ / '-' /
| --'\_/|/ | _/
|___.-' | |`'`
| | |
| / './
/__./` | |
\ | |
\ | |
; | |
/ | |
jgs |___\_.\_
`-"--'---'專案地址見 這裡, 官方的介紹:
pushState ajax = pjax
詳細的解釋請看 知乎上的這個問題, 或自己去查閱資料.
簡單點描述, 就是利用 ajax 技術去伺服器取得文件, 在不刷新瀏覽器頁面的情況下, 更新目前頁面, 並確保頁面的js 和 css 等 assets 檔案不會重複載入, 然後利用瀏覽器提供的 pushState 功能, 對URL 進行更新, 並能保證用戶透過點擊back 按鈕回溯到歷史頁面.
注意: 並不是所有瀏覽器都支援pushState, 關於瀏覽器的相容請見這裡, 當瀏覽器不相容的時候, 會自動使用原始的瀏覽方式進行訪問.
因為不需要整個頁面刷新, 並且 assets 檔案都不需要重新載入, 很大程度提高了頁面的載入速度.
rcrowe/Turbo使用package rcrowe/Turbo .
rcrowe/Turbo#在 composer.json 裡的 require 屬性下新增:
"rcrowe/turbo": "0.2.*"
然後 composer update 或 composer install
檔, 在選項 providers 陣列裡面加入:<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">"Turbo\Provider\Laravel\TurboServiceProvider",</pre><div class="contentsignin">登入後複製</div></div>下載pjax.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
<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(); });});以上是在Laravel應用程式中如何使用pjax進行頁面加速的詳細內容。更多資訊請關注PHP中文網其他相關文章！
