読者です 読者をやめる 読者になる 読者になる

peko’s Hatena Blog

ルールを守ってアクセルシンクロォォォ!!!

簡単なloading jQuery

jQuery プログラム プログラム-javascript

設計してると唐突にLoadingが必要になるときがありますがそんな時jquery.blockUIを使う事があります。

超今更ですがお手軽なので↑を使っていますが、本気で作り込む場合は自作してます。

以下の「Download and Support」のタブからダウンロード

jQuery BlockUI Plugin

ボタンイベントに引っかけて以下の様に記述すれば指定した画像でのLoading読込みが始まり最終的に$.unblockUI();でLoadingを終わらせます

$.blockUI({
message:'<img src="images/loading.gif" />'
});

独自に非同期処理が存在するならそれを利用してcallback関数で$.unblockUI();するとかがリアル。

jQueryの非同期処理で↓の様にやるのが適切かなと思います

$.blockUI();
$.ajax({
url: "pass.png",
}).done(function() {
//hatena
}).always(function() {
$.unblockUI();
});