pjax その2
pjaxだいぶ分かってきたような
テンプレはこんなん
デモ
引っかかったのが何個か
◯ブラウザでの進む/戻るでの読み込みコンテンツ
再現パターンあまりつかめなかったけど、ブラウザで戻るしてもたまにURLだけ変わってpjaxの読み込みコンテンツは変わんないことが(リロードすれば直る)
こことかも詳細ページ→トップを繰り返しているとなるので仕様かなーと思ったけど
絶対パスで書いたらいける感じ
◯ブラウザでの進む/戻るでの固定要素の扱い
例えば、ページ読み込みで alert(); を突っ込んでおいてpjaxでページ遷移して、ブラウザの戻るボタンをしてもアラートがならない
それできないことにはこういう固定要素のナビ上でアニメーションで現在地を示すのは難しいなーと思ってたら、popstateっていうイベントがあったのでそれで回避
$(window).on('popstate', function(e) { alert('browser go back'); });
◯遷移時初回ロードのエフェクト
サイト内で遷移する際はpjaxなのでエフェクト書いてるのだけれど、意外と忘れがちで面倒なのがサイトへの初回遷移時
これは
$(document).on('pjax:complete', function() {... と同じ内容を $(window).on('load', function(){...
に書くだけ
◎参考
- pjaxでスムーズなページ遷移(静的サイトでも手軽にpjax!) | Cubix
- jQuery – pushStateとAjaxの組み合わせpjax – Qiita
- pjaxを使ったSEOにも考慮した非同期通信 | 株式会社マグネッツ:福岡市博多区のホームページ制作会社
- web帳 | pjax (pushState + Ajax) jquery plugin 使用方法 などなど
- はじめての「pjax」 | ラクスル tech blog
- WordPressでPjaxの実装と、よくあるトラブルの解決方法 | naoyu.net
- pjaxによる画面遷移 | 千葉県習志野市のホームページ制作 somosomo