turbolinks と jQuery での非同期通信時、時間がかかる場合にインジケータを表示する - 情報と音楽

XMLHttpRequest による非同期通信は便利ですが、デフォルトではなんのフィードバックもないため、時間がかかるとユーザは不安になります。 ここでは、turbolinks および jQuery による非同期通信で、一定の時間がかかった場合に、通信中であることを示すインジケータを表示する方法を説明します。 前提 インジケータはすべてのページに loading-indicator という id の要素で用意されているものとします。この要素の表示・非表示を切り替えることで、通信中かどうかを示します。 コードは CoffeeScript で示します。 検証環境は下記の通りです。 turbolinks 2.2.0 jQuery 1.10.2 Chrome 33 OSX 10.9.2 turbolinks の場合 turbolinks は、リンクのクリックからページのロードまでに、いくつかのイベ