說明：phphub 使用 pjax 來加速網頁的加載, 這篇文章是在開發完此功能后做的筆記.
相關推薦：《laravel教程》
什么是 Pjax
????????.--. ???????/???? ??????##?a??a ??????(???'._) ???????|'--?| ?????_.___/_???___pjax___ ???.">?Y/|<p>項目地址見?這里, 官方的介紹:</p><blockquote>pushState + ajax = pjax</blockquote><p>詳細的解釋請看?知乎上的這個問題, 或者自己去查閱資料.</p><p>簡單點描述, 就是利用?ajax?技術去服務器獲取文檔, 在不刷新瀏覽器頁面的情況下, 更新當前頁面, 并且能保證頁面的JS?和?css?等?assets?文件不會被重復加載, 然后利用瀏覽器提供的?pushState?功能, 對 URL 進行更新, 并能保證用戶通過點擊 back 按鈕回溯到歷史頁面.</p><blockquote><p><strong>注意:</strong>?并不是所有瀏覽器都支持 pushState, 關于瀏覽器的兼容請見這里, 當瀏覽器不兼容的時候, 會自動使用原始的瀏覽方式進行訪問.</p></blockquote><h3 id="為什么要使用-Pjax">為什么要使用 Pjax</h3><p>因為不需要整個頁面刷新, 并且?assets?文件都不需要重新加載, 很大程度上提高了頁面的加載速度.</p><h2 id="服務端安裝-rcroweTurbo">服務端安裝?rcrowe/Turbo</h2><p>使用 package?rcrowe/Turbo?.</p><h3 id="安裝-rcroweTurbo">安裝?rcrowe/Turbo#</h3><p>在?composer.json?里的?require?屬性下添加:</p><pre class="brush:php;toolbar:false;">"rcrowe/turbo":?"0.2.*"
然后?composer update?或者?composer install
配置?Providers#
編輯?app/config/app.php?文件, 在選項?providers?數組里面添加:
"TurboProviderlaravelTurboServiceProvider",
下載 pjax.js
在?publicjs?文件夾下
wget?https://raw.github.com/defunkt/jquery-pjax/master/jquery.pjax.js
然后在模版里面加載此文件
<script></script>
最后頁面里調用:
$(document).ready(function(){????$(document).pjax('a',?'body');});
上面的代碼解釋是, 把所有的?a?標簽的點擊事件截獲, 如果當前瀏覽器支持?pjax?的話, 發送一個 ajax 請求, 并把參數_pjax=body?帶過去.
如果一起順利的話, 在 chrome 的 debuger 里能看到類似于這樣的請求:
至此, 已經順利配置完畢.
添加加載動畫#
接下來要來添加一個頁面加載的動畫, 效果如下:
添加?nprogress#
使用?rstacruz/nprogress?來實現.
添加的方法是?下載?文件, 然后把?nprogress.js?和?nprogress.css?添加到頁面中:
????<script></script>????
調用#
修改上面的代碼, 修改后的代碼如以下:
$(document).ready(function(){????$(document).pjax('a',?'body');????$(document).on('pjax:start',?function()?{ ??????NProgress.start();??});??$(document).on('pjax:end',?function()?{ ??????NProgress.done(); ??????self.siteBootUp();??});});
這樣的話, 每一次點擊頁面的時候就會有很酷炫的效果了
? 版權聲明
文章版權歸作者所有，未經允許請勿轉載。
THE END
