Ajaxが発生したら、ローディング画像(gifアニ)をオーバーレイで表示[For Rails]

今回はAjaxの通信中は、gifアニメーションのローディング画像とオーバーレイで表示した背景の上に載せる方法です。

一般的に見かける方法ですが、結構簡単に実装できるのでもし良かったらぜひチャレンジしてみてください。

😎 ローディング画像gifアニメーションの調達

gifアニメーションのローディング画像は次のサイトなどで無料で簡単にダウンロードできます！

Chimply generates your images

Preloaders.net - AJAX loading GIF and APNG spinners, bars and 3D animations generator

ダウンロードしたら、app/assets/images配下のフォルダに保存。

🐯 Gemのインストール

次に『Colorbox - a jQuery lightbox』の入ったgem『stevo/colorbox-rails』をインストール。

Gemfileに下を追加して、bundle installを実行してください。

gem 'colorbox-rails'

🐡 colorbox-railsの読み込み設定

app/assets/stylesheets/application.cssに以下を追加。

*= require colorbox-rails

app/assets/javascripts/application.jsに以下を追加。

//= require colorbox-rails

🚌 viewにローディングの記述を追加

次のコードをapp/views/layouts/application.html.haml(ERB)に追加。

さらにCSSに次のコードを追加。

.loading {
  display: none;
  height: 46px;
  left: 50%;
  margin-top: -23px;
  margin-left: -23px;
  position: fixed;
  _position: absolute;
  top: 50%;
  width: 46px;
  z-index: 10000;
}

でもって、Ajaxの実行時にローディング画像が表示されるようにcoffescriptファイルに以下を追加。

$ ->
  # Ajaxの通信中は、ローディング画像を表示
  $(document).ajaxSend ->
    $(".js-loading").show()
    $("#cboxOverlay").css("opacity", "0.3").show()
    return

  # Ajaxの通信が完了したら、ローディング画像の削除
  $(document).ajaxComplete ->
    $("#cboxOverlay").fadeOut 100
    $(".js-loading").fadeOut 100
    return

これでAjaxで通信が実行されて完了するまでローディング画像が表示されます！

🎉 参考リンク

[jQuery]ローディング中gifアニメーションを画面全体にかぶせる(オーバーレイ)

🐞 変更来歴

(07-02 20:50) 新規作成

🖥 VULTRおすすめ

「VULTR」はVPSサーバのサービスです。日本にリージョンがあり、最安は512MBで2.5ドル/月($0.004/時間)で借りることができます。4GBメモリでも月20ドルです。最近はVULTRのヘビーユーザーになので、「ここ」から会員登録してもらえるとサービス開発が捗ります！

酒と泪とRubyとRailsと