フロントのエンド

Web開発をがんばりたいブログ

JavaScript

「Barba.js」で pjax 遷移後にアレコレ処理をする

by:
16/09/05

Braba.jsはなかなか快適なのですが、pjax遷移だとインラインのjs処理しかしてくれず、$(document).ready$(window).loadで指定している処理は指示しないとやってくれません。

例えば、シンタックスハイライターの「highright.js」なんかは、pjax遷移すると遷移後は動きません。

なので、

Barba.Dispatcher.on('newPageReady', function() {

    //コードハイライトを実行
    hljs.initHighlighting.called = false;
    hljs.initHighlighting();

    //アナリティクスに送信
    ga('send', 'pageview', window.location.pathname.replace(/^\/?/, '/') + window.location.search);

});

こういう感じにBarba.Dispatcher.onで遷移後の処理を書き足してやります。

Barba.js

遷移後以外にもリンクがクリックされたタイミング、ページの読み込みが始まったタイミングと、細かく制御出来る様子。

これでpjax遷移しても必要なjsを処理させられるというモノです。はい。

「Barba.js」で pjax 対応サイトにして遷移の体感速度を上げる – フロントのエンド

「highlight.js」ソースコードを綺麗に表示してくれる子 – フロントのエンド

コメントを残す