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)に追加。

<div class="loading"><img src="/img/loading.gif" width="48" height="48" alt="Loading" /></div>

さらに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) 新規作成

📚 おすすめの書籍