タグ

pjaxに関するheavenshellのブックマーク (7)

  • PACE - pjax用のローディング表示ライブラリ

    MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 最近流行っているpjax。コツはいりますが画面遷移がなくなること、同じレンダリングを行わないことで表示速度が速くなると言ったメリットがあります。Ajaxも画面の一部を書き換えたりするので同じようなメリットがあります。 そんなAjax/pjaxを使った場合、ページ読み込み中のローディング表示は欠かせません。そのためのライブラリとして使ってみたいのがPACEです。 PACEの使い方 まず最初にJavaScriptとスタイルシートを読み込みます。 <head> <script src="/pace/pace.js"></script> <link href="/pace/themes/pace-theme-barber-shop.css" rel="stylesheet" /> </he

    PACE - pjax用のローディング表示ライブラリ
  • 2行追加するだけでWebサイトを高速化するInstantClick.io - atskimura-memo

    Before visitors click on a link, they hover over that link. Between these two events, 200 ms to 300 ms usually pass by (test yourself here). 引用:InstantClick — JS library to make your website instant リンクにマウスオーバーしてからクリックするまでには200msから300msほど時間がかかるそうです。実際このテストページでクリックしてみるとMacのトラックパッドだとさらに遅く500msくらいかかってました。 InstantClick.ioはその間に裏でリンク先ページをロードして勝手にリンクをpjax化してしまうという高速化ライブラリです。 やってることはRails4のturbolinksと似てます

    2行追加するだけでWebサイトを高速化するInstantClick.io - atskimura-memo
  • Pjax を使ってフォームの submit で非同期にページを更新してみた - present

    前回、非常に苦労して Pjax を試しました。 Pjax に挑戦したら思っていた以上に苦労した話 - present ページ移動を非同期で行えるようになったので、次はフォームの submit 後も同じようにページを移動したい、と考えてしまうのは当然ですよね。これも Pjax でやりたい。 jquery.pjax のソースコードを見たところ、a タグなどの click イベントを捕まえて、非同期でページ更新を行っていました。フォームの submit イベントには対応していません。さて、どうしよう。 Pjax の $.pjax メソッドを使えば、$.ajax みたいに POST リクエストを送信できるので、これを使って自前でフォームデータを送信すれば上手くいきそうです。 <!DOCTYPE html> <html> <head> <title>PjaxSample</title> </head

    Pjax を使ってフォームの submit で非同期にページを更新してみた - present
  • pjaxできれいなURL+非同期画面遷移! | ヘッドウォータースのブログ TechNote

    こんにちは。荒井です。 Facebookもtwittergoogleも画面遷移のときには、非同期で次のページを読み込むような作りになってますね! これは、ajaxで次のページを読み込むのと同時に「History API」というHTML5の機能を使って、URLを更新することで実現してます。 毎回全部読み直さないから通常の画面遷移よりも早いし、URLが変わるから履歴に残るし、良いことばっかり!!SEO的にも「#!」を使ったやつより良いよっていうのを何かで読みました!!! これからWebサービスを作るなら、導入したいですね!!! これpjaxを使えば簡単に導入できるんです!!!よし!!! PJAX!! pjaxとは、GithubのChris Wanstrathって人が作ってるjqueryプラグインです。 上で説明した、History APIとajaxを使った非同期の画面遷移を簡単に導入すること

    pjaxできれいなURL+非同期画面遷移! | ヘッドウォータースのブログ TechNote
  • backbone.jsがいつのまにかpjax対応していた

    ■概要 年初にbackbone.jsの調査をしていた頃は、ajaxで画面遷移を行うには、fragmentを利用する事しかできませんでした。 しかし0.5以降では、Backbone.Routerを利用する事によって、pjax(HTML5のpushStateを利用した話題のあれ)な画面遷移が出来るになっています。 pjaxについては、こちらをご参照ください。 またgithubのファイルブラウザはpjaxの良例として有名なのでチェックしてみて下さい。

    backbone.jsがいつのまにかpjax対応していた
  • 超シンプルな、pushState + Ajax = PJAXのサンプル Flask編 - When it’s ready.

    HTML5熱いですね。いろんな意味で BigPipeやら、HTMLでテンプレートエンジンとかいろいろ出ていますがユーザービリティ下げちゃいけないよねって事は、どの技術でも大切な共通項ですね。pjax = pushState + ajax使えば、リッチな人にはサクサクなUIを、そうじゃない人にもそれなりに提供できる。その上、戻るボタンもサーチエンジンにも優しいとくれば、これは試さないわけには行かないですね。 動作サンプル: http://pjax.atu.si/ Pjaxするとどうなるのか? 非同期動作時 http://pjax.atu.si にアクセスをして、リンクをクリックすると要素が非同期に変更される。 非同期に更新されているがURLは、シンプルなものに変更される。 同期動作時 http://pjax.atu.si/parts/x や http://pjax.atu.si/parts/

    超シンプルな、pushState + Ajax = PJAXのサンプル Flask編 - When it’s ready.
  • pjax こそが pushState + Ajax の本命 - punitan (a.k.a. punytan) のメモ

    pjaxの前にpushStateとは AjaxとjQueryの説明は不要として、pushStateとはなんぞや。 pushStateを使ってブラウザの履歴に対する操作をし、HTMLの一部のみを書き換える動作でもブラウザの戻る/進む機能を実現できる方法のひとつ。Ajaxなページを再現し、かつURLを見慣れた方法で自然にpermalinkを表現できる。 有名なところではGitHubで使われてるアレ。 hash fragment (/#!/) ブラウザの履歴を機能させるため、URL の fragment (#) を使ってAjaxなページを実現する方法。一時期もてはやされた感があるが、さらなる「#!」URL批判 - karasuyamatenguの日記 など合理的な反論があり、これから導入するのはためらわれるところ。 有名なところではTwitterで使われているあの厄介者。 pjaxとは pjax

    pjax こそが pushState + Ajax の本命 - punitan (a.k.a. punytan) のメモ
  • 1