ostadsho
چهارشنبه 27 اسفند 1393, 13:07 عصر
تصویر لودینگ عموما در مواردی کاربرد داره که از ajax استفاده میشه، یا اینکه بار اول صفحه داره لود میشه،فرض کنید یه همچنین تابع ajax داره اجرا میشه و قراره در طی مدت زمانی که عملیات در حال انجام شدنه ما یه تصویر لودینگ رو نمایش بدیم،خب اول میایم عکس لودینگ رو بهش استایل مناسب میدیم مثلا اون رو دقیقا وسط صفحه متمرکز می کنیم:
<style>
#loading_img{position: fixed; left: 0;right: 0;margin: 0 auto; top: 100px; display: none;}
</style>
<img src="loading.gif" id="loading_img">
<button id="test"></button>
توجه داشته باشید که display تصویر لودینگ حتما باید none باشه،چون قرار نیست همیشه توی صفحه نمایشش بدیم که،خب حالا دستورات ajax:
<script>
$("#test").click(function(){
$("#loading_img").show();
$.ajax(function(){
url:'test.php',
type:'post',
data:{}
})
.done(function(){
$("#loading_img").hide();
})
})
</script>
توضیح اینکه فرضا ما زمانی که روی button کلیک کردیم میخوایم عملیاتمون اجرا بشه،بنابراین به محض اینکه روی دکمه کلیک بشه عکس ظاهر میشه اما در قسمت done به محض اجرای دستورات مجددا عکس لودینگ مخفی میشه.اون تابع ایجکسی که نوشتم فقط نمونه هست و مواردی که داخلش مشخص شده هیچ اهمیتی در بحث فعلی ما نداره.