ロード中イメージの表示・非表示をJSとCSSで実現

//Javascript source (jQuery required)----------------------->>>

//call this before ajax transaction
function setLoadingAnm(){
$("#your_id").after("

");
$("#your_id").after("

");
var pos = $("#your_id").position();
var gridW = $("#your_id").width() + 23;
var gridH = $("#your_id").height() + 20;
$(".your_loading_bg_class").css({left:pos.left, top:pos.top, width:gridW, height:gridH});
var centerW = (pos.left * 2 + gridW)/2 -30;
var centerH = (pos.top * 2 + gridH)/2 -27;
$(".your_loading_img_class").css("left",centerW);
$(".your_loading_img_class").css("top",centerH);
}

//call this after ajax transaction
function removeLoadingAnm(){
$(".your_loading_img_class").remove();
$(".your_loading_bg_class").remove();
}

//usage exapmle

function yourFunction(){
setLoadingAnm();
$.ajax({
//bla bla bla...
});
removeLoadingAnm();

}

/CSS------------------------>>>/

.your_loading_img_class{
background: url(images/loading.gif);
height: auto;
width: auto;
position: absolute;
z-index: 1001;
display: block;
}

.your_loading_bg_class{
background: #0000FF;
height: auto;
width: auto;
position: absolute;
z-index: 1000;
display: block;
opacity: 0.10;/all with CSS3 compatibility/
filter: alpha(opacity=10);/Netscape/
-ms-filter: alpha(opacity=10);/IE/
}