Jqueryでローディング画像の表示
ここの記事でページングのAjax処理について触れたんですが、そこでローディング画像の表示についてメモします。
$(function(){
$('#pagination .next').click(function() {
$("#loading").toggle();
var url = $(this).attr("href");
$('.hoge:last').load(url,function(){
$("#loading").toggle();
});
return false;
});
});
HTML
<p id="loading" class="hidden"> <img src="/img/loading.gif"alt="読み込み中"/> </p>
CSS
.hidden{
display:none;
}
あらかじめローディング画像の方はCSSにてhiddenにしておくこと。
toggle();を使ってあげることで、非表示なら表示、表示なら非表示へと変更できます。
クリックをしたら、表示をし、ロードが完了したら、再びtoggle();を実行して、今度は非表示にしてあげます。
あと、良い子のみんなは、画像にちゃんとwidthとheight属性を書いてあげてね。じゃないと速度が低下するよ。