PP_clock500

【Ajax】非同期ロード中のクルクルGIF画像を実装してみる

 
今更ながらAjaxの非同期ロード中のクルクルを実装することになったのでメモ的にエントリーします。
もっと見る的なやつです。

 
OZP_tabakowokuwaerusagyouin1188500
「今更!?」

 
まあそう言わんといてくださいな。

プログラミングやWordPressを習得するのに一番近道な方法とは?

クルクルGIF画像を探す

クルクルGIF画像なんて作れないよ!という方は、まずはクルクルGIF画像を探しましょう。

下記の3つが有名なクルクルGIFジェネレータサイトです。

 

ajaxload.info

 
ajaxload

 

chimply

 
Chimply_generates_your_images

 

preloaders.net

 
Preloaders.net

どのサイトも機能的には変わらず画像の色・背景色・透過を選択できるので、違いは画像の種類くらいでしょうか。
好きな画像をダウンロードしましょう。
「透過」にすることを忘れずに!

 

クルクルを表示したいところにidをつけたDIVを設置する

 

Ajax部分を書く

 

解説

クルクル画像を表示したいDIVにidを指定して、Ajaxが始まったらそのDIVに画像をappenndで埋め込み、Ajaxが成功したら画像を隠す。
簡単ですね!

お好みで#loadingにcssで調整や飾りつけをしましょう。

 
誰かのお役に立てば嬉しい限りです。

参考サイト

Ajaxのローディング画像が作れるジェネレータまとめ | IDEA*IDEA
百式管理人さん、ありがとうございます!

もし良かったらフォローとか購読して頂けると嬉しいです!╭( ・ㅂ・)و ̑̑ グッ !

follow us in feedly

コメントを送る

メールアドレスが公開されることはありません。

CAPTCHA