jQuery

スムーズなページ遷移　pjax

2014.1.22
ajax

最近見かける事が多くなったjquery プラグイン、またgithubで使われていることで有名な、pjaxを実装してみます。

pjaxとは、pushState + ajax　を意味する造語だそう。
そしてpushStateとはHTML5で導入されたURLを操作するAPIのこと。
これを使うことで、ajaxでコンテンツを入れ替えてもページ移動が行われる→ブラウザの進む・戻るボタンが使える、PVが取れる。
さらに重複するコンテンツの読み込みがなくなるので、スムーズな遷移が実現出来て、ウェブサイトやアプリケーションなどのUX向上に繋がります。

https://github.com/defunkt/jquery-pjax

対応ブラウザは以下。
caniuse.com/#search=pushstate
pushStateが実装されていない、E9以下では使えません。

まずは静的ページへ実装してみます。

静的ページ内の、#pjax-container内部のコンテンツを入れ替える想定。

サンプル

Sample page

jquery と、jquery.pjax.jsを読み込んでいます。
その後、mypjax.jsで実装しています。

最初は$.pjaxをコールした後にanimateするような実装だったが、コンテンツが一瞬表示されてから透過を初めてしまうケースがあったので、
animateのコールバックでpjaxするのが吉。

if ($.support.pjax) {
	$(document).on('click', 'a', function(e) {
		e.preventDefault();
		var href = $(this).attr('href');
		$('#pjax-container').animate({
			opacity : 0
		}, 300, function(){
			$.pjax({
			  url: href,
			  container : '#pjax-container',
			  fragment : '#pjax-container',
			  timeout : 2000
			});
		});
	});

	$(document).on('pjax:complete', function() {
		$('#pjax-container').animate({
			opacity : 1
		}, 300);
	});
}

ブラウザがchromeなら、developer toolをつかってnetworkを見てみると、
サンプルでpjax遷移をすると新たにindex2.html?_pjax~ というページが読み込まれてます。
ただこの状態では、ページ遷移の時にhtmlが全部読み込まれています。折角のajaxなので、必要な部分だけ読み込むようにしてやればパフォーマンスをもっと伸ばせますね。
そこで、request header をみてやると、X-PJAX:trueやX-PJAX-Container:#pjax-containerという情報が見られます。
ということは、サーバーサイドの実装では、phpなどで

$rh = getallheaders();
$pjax = $rh['X-PJAX'];

や、

$pjax = $_GET['_pjax'];

のような形でpjaxでの遷移かどうかを判別出来るので、ここで書き出しの判定をしてやれば新しく読み込む場所、読み込まない場所を制限できます。

BLOG TOP