Barba.jsとPrefetchを導入して画面遷移を爆速にする方法!!5分で完了!サンプルあり!

Barba.jsはAjax + History APIを用いてスムーズが画面遷移を可能とするPjaxライブラリです。Barba.jsを導入することで、ページ遷移のスピードアップ、ユニークなページ遷移アニメーションが実装できます。ここではBarba.jsの導入方法について紹介します。Pjaxのメリット、デメリットについては前回の記事をご覧ください。

前の記事:Pjax導入のメリットとデメリット!

この記事のゴール

この記事ではBarba.jsを使用してこのGIFアニメのような画面遷移を実装することをゴールとします。

完成時のコードとデモ

完成時のサンプルコードとデモはこちらからご確認いただけます。

デモはこちらサンプルコードはこちら

HTMLの実装

まず、完成時のHTMLを御覧ください。

Barba.jsの実装に関わるところは以下の通りです。

実装の流れ
  1. コンテナエリアの設置
  2. barba.jsの読み込み

コンテナエリアの設置

サイトレイアウト
まず、Pjax遷移対象のコンテナエリアを設置します。図の用にMainエリアのみをページ毎に読み替えたい場合は、main部分をbarba-containerクラスで囲みます。barba-containerbarba-wrapperはプロパティーを書き換えることで変更可能です。(詳細

Barba.jsの読み込み

ページ下部でbarba.jsを読み込んでいます。

これで、HTMLの準備は完了です。続いて、javascriptの実装に移ります。

JSの実装

Javascriptの実装の完成形は以下の通りです。

以下、それぞれ分解してご説明します。

Barba.jsの初期化

DOMの読み込み完了後、Barba.jsの初期化処理を行います。

ヒント
DOMContentLoadedとloadの違い
DOMContentLoadedはDOMツリーの解析後に発火し、loadはDOMツリーと画像解析後に発火します。基本的にjavascriptの処理はDOMの操作のみを行い、画像の読み込みを待つ必要がない場合が多いため、なるべくDOMContentLoadedのイベントリスナを使いましょう。DOMContentLoadedとloadの違いについてはこちらを参照してください。

Prefetchを使ったページ遷移の高速化

Prefetch機能はマウスがリンクをホバーした際に、リンク先のコンテンツを先に取得する機能です。ページ遷移が高速になる半面、サーバーへの負荷は増加するため、使用には注意が必要です。以下のコードでPrefetch機能を有効に出来ます。

まとめ

今回はBarba.jsを使った基本的な導入方法についてご説明しました。
次回は画面遷移時のアニメーションを追加します。

Pjax(Barba.js)でスムーズな画面遷移を実装する方法!5分で完了!サンプルあり!

最新記事