WEBデザインの勉強

初心者が1からWEBデザインを勉強するブログ。

PJAX

ページ遷移時に、非同期通信で指定した箇所のみ通信し、
スムーズな画面遷移が可能。

Redirecting…

$(function() {
  $.pjax({
    area: '#main',
    link: 'a.target',
    wait: 800
});
area

切り替える範囲

link

PJAXさせるリンクを指定

wait

リンクをクリックしてからの待機時間

ページ遷移する前

$(document).on('pjax:fetch',function(){
  ページ遷移する前の処理
});

ページ遷移した後

$(document).bind('pjax:render', function() {
  ページ遷移した後の処理
});

pjax:renderに記述した処理は直接URLを叩いて飛んできた場合行われないので注意

参考サイト

program-designer.xyz



PJAXを使っているサイト

sao-movie.net

www.otomate.jp

www.otomate.jp