Help us understand the problem. What is going on with this article?

高速かつスムーズなページ遷移を実現する pjax 覚書

More than 1 year has passed since last update.

★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>内にインラインで記述するようにする。

参考

基本的に公式ドキュメント(日本語)が詳しいので要チェック。

kokushin
「つくる人がつくり続けられる世界を創る」べく、日々サービスを開発しています。
https://yusukeishiguro.com
admin-guild
「Webサービスの運営に必要なあらゆる知見」を共有できる場として作られた、運営者のためのコミュニティです。
https://admin-guild.slack.com
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away