★2018/04/13投稿 → Barba.jsを使った実装方法を書きました
pjaxをざっと触ってみたので、自分用にメモ。
少々癖はあるが、シームレスなページ遷移の実装や、読み込み速度の向上が可能。
まだまだ使いこなせてないので、マスターしたい（切実）
★pjaxについてはこちら → http://falsandtru.github.io/jquery-pjax/
##準備
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.pjax/1.9.6/jquery.pjax.js"></script>
htmlの<head>部分に記述。基本的にpjax.jsは__一度読み込めば動作し続ける__ので、なんども読み込み直す必要はない。
##JavaScript
$(function(){
$.pjax({
area : '#content',
link : 'a:not([target])'
});
});
areaに書き換えるエリアの範囲を指定、linkにpjaxを適用させるリンクを設定。
基本的にはこれだけで動作可能。
上記の場合、__「target="blank"以外のaタグをクリックしたら、pjaxでリンク先の#content内の要素を読み込み、書き換える」__という動作になる。
##よく使うオプション
$(function(){
$.pjax({
area : '#content',
link : 'a:not([target])'
ajax : { timeout: 2500 }, //Ajaxの設定を記述可能
wait : 500 //リンクをクリックしてからの待機時間
load : { script: true } //遷移先のインラインスクリプトを読み込む
});
});
ajaxでは、Ajaxの設定を記述できる。タイムアウト時間の設定、エラー時の処理など。
waitは、リンクをクリックしてからの遅延時間を設定できる。
例えば、__「0.5秒のCSSアニメーションを実行後に遷移させたい場合」__などに有効。
loadに関しては次の項目で詳しく。
##load:scriptに関して
areaの範囲内にある、インラインスクリプトを読み込むか読み込まないかの設定。初期値はfalse。
これをtrueにしておくと、ページ遷移した際に個別のページで設定されているJavaScriptを実行することが出来る。(ただしインラインスクリプトに限る)
ちなみにJavaScriptを外部ファイル化すると、pjaxは一度しか読み込み・実行しないもよう。ページ書き換えの度に繰り返し実行したい場合は、必ずインラインで<body>内に記述しよう。
##各種イベントについて
pjaxには、ページの更新処理の時に呼び出されるイベントが用意してあるので、ここで遷移アニメーションなどを設定することが可能。
【pjaxによるページ遷移が行われる前に発生】
$(document).bind('pjax:fetch', function() {
// ここに処理を記述
});
【pjaxによるページ遷移が行われた後に発生】
$(document).bind('pjax:render', function() {
// ここに処理を記述
});
基本的には上記2つでページ遷移の前、後の処理を設定することが出来る。
addClassなどでクラスを追加してCSS Transitionでアニメーションさせるといい感じになるぞ。
★その他のイベント → http://falsandtru.github.io/jquery-pjax/api/event/
##動かないとき
勉強中に遭遇したのは、load: { script: true }を設定していた時に、pjaxが動作せず普通にページ遷移してしまうという現象。
これは、<body>内に余計なスクリプトを含んでいると起こってしまうみたい。
一回しか読み込まないものは<head>へ外部ファイルに、繰り返し読み込むものはarea範囲内の<body>内にインラインで記述するようにする。
##参考
基本的に公式ドキュメント(日本語)が詳しいので要チェック。