【Ajax】非同期ロード中のクルクルGIF画像を実装してみる
今更ながらAjaxの非同期ロード中のクルクルを実装することになったのでメモ的にエントリーします。
もっと見る的なやつです。
「今更！？」
まあそう言わんといてくださいな。
プログラミングやWordPressを習得するのに一番近道な方法とは？
目次
クルクルGIF画像を探す
クルクルGIF画像なんて作れないよ！という方は、まずはクルクルGIF画像を探しましょう。
下記の2つが有名なクルクルGIFジェネレータサイトです。
① ajaxload.info
② preloaders.net
どのサイトも機能的には変わらず画像の色・背景色・透過を選択できるので、違いは画像の種類くらいでしょうか。
好きな画像をダウンロードしましょう。
「透過」にすることを忘れずに！
クルクルを表示したいところにidをつけたDIVを設置する
| 1 2 3 | <!-- クルクルを表示するところ --> <div id="loading"> </div> |
Ajax部分を書く
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | function moreload() { // クルクル画像を表示 showLoadingImage(); $.ajax({ type: "POST", url: "get_moreload_hogehoge", dataType: "json", success: function(json){ // Ajax取得データをゴニョゴニョ }, complete: function (json) { // 処理成功！ // クルクル画像を消す hideLoadingImage(); }, error: function (XMLHttpRequest, textStatus, errorThrown){ // エラー時 } }) } // クルクル画像表示 function showLoadingImage() { // ダウンロードしてきたクルクル画像を指定しましょう！ $("#loading").append('<img src="/img/ajax_load.gif">') } // クルクル画像消去 function hideLoadingImage() { // ゆっくり消すためにfadeout(500)を指定してますが、hide()とかでも良いです。 $("#loading").fadeOut(500); } |
解説
クルクル画像を表示したいDIVにidを指定して、Ajaxが始まったらそのDIVに画像をappenndで埋め込み、Ajaxが成功したら画像を隠す。
簡単ですね！
お好みで#loadingにcssで調整や飾りつけをしましょう。
誰かのお役に立てば嬉しい限りです。
参考サイト
Ajaxのローディング画像が作れるジェネレータまとめ | IDEA*IDEA
百式管理人さん、ありがとうございます！
