ساخت لودینگ برای یک عملیات خاص

[alasht]

یا سلام خدمت دوستان من میخوام به عنوان مثال با متد post به صورت زیر به صفحه test.php مقداری رو بفرستم و نتیجه رو دریافت کنم
<script type="text/javascript">
$(document).ready(function() {
$('button').click(function() {
$.post('test.php',{name:'test'},function(Data){
$('#result').html(Data);
});
});
});
</script>

<button>کلیک</button>
<div id="result"></div>

حالا با توجه به سرعت اینترنت و سرور این کار در مقدارهای زیاد و عملیاتهای سنگین مقداری طول میکشه می خوام کار کنم که بعد از کلیک روی دکمه یه عکس یا متنی نشون بده به عنوان لودینگ که صفحه خالی نمونه و طرف بدونه که باید صبر کنه و بعد از دریافت نتیجه اون پیغام بره
ممنون میشم راهنمایی بفرمایید

[ricky22]

سلام
قبل از اغاز عملیات یک Div با ظاهر مناسب و Z index بالا و مثلا یک رنگ مشکی را Show کن.
و بعد از عملیات Hide کن

[alasht]

قبل از اغاز عملیات یک Div با ظاهر مناسب و Z index بالا و مثلا یک رنگ مشکی را Show کن.
و بعد از عملیات Hide کن ممنون از پاسختون
من لودینگمو ساختم اما همین اغاز عملیات و پایان عملیاتم نمی دونم کجاست
فرض کنید من لودینگم رو ساختم

<div class="loading"></div>
حالا من اینو کجا بزارم که اول عملیات نمایش داده بشه و پایان عملیات محو بشه
ممنون میشم در کد بالا نمایش بدید تا متوجه بشم
با تشکر

[hossin.esm]

<script type="text/javascript">
$(document).ready(function() {
$('#loading').hide();
$('button').click(function() {
$('#loading').hide();
$('#loading').show('fast');
$.post('test.php',{name:'test'},function(Data){
$('#result').html(Data);
$('#loading').hide('fast');
});

});
});
</script>
<button>click</button>
<div id="result"></div>
<div id="loading" style="position:absolute;top:200px;left:400px;">please wait</div>