スムーズなページ遷移 pjax
最近見かける事が多くなった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 }); }); […]