ورود

View Full Version : سوال: نمایش نوشته در حال بارگزاری قبل از لود یک صفحه


haniye70
سه شنبه 11 تیر 1392, 20:05 عصر
با سلام خدمت همه

من یه سوال داشتم یک کد دارم که با اون مقادیر رو به صورت ajax به یک فایل php ارسال میکنم
من در ارسال هیچ مشکلی ندارم فقط می خوام مدت زمانی که طول میکشه تاپاسخ از طرف فایل php دریافت میشه یک تصویر یا نوشته لودینگ به کاربر نمایش بدم نمی خوام از تایم استفاده کنم یک کد می خوام که تا لود نشدن کامل فایل برگشتی یک نوشته و یک تصویر نمایش بده متشکر میشوم دوستان راهنمایی بفرمایند


کد من:قلب:




<script>
$(document).ready(function(){
$("#start").click(function () {
$.ajax({
type: "POST",
data: "name=" + $("#txtname").val()+"&number=" + $("#txtnumber").val()+"&add=" + $("input:radio[#txtadd]:checked").val()+"&del=" + $("#txtdel").val(),
url: "itemload.php",
dataType: "script",
success: function(msg){
$("#recontent").html(msg)
}
});
});
});
</script>
haniye70
سه شنبه 11 تیر 1392, 22:36 عصر
کسی کمکم نمیکنه:افسرده:
jalil_gh
سه شنبه 11 تیر 1392, 22:41 عصر
اول شما اون تصویر رو به html اضافه کنید و مخفیش کنید. بعد قبل از ارسال ajax اونو نشون بدید و تو متد complete هم اونو مخفی کنید.
$(document).ready(function(){
$("#start").click(function () {
$("#loading").show();
$.ajax({
type: "POST",
data: "name=" + $("#txtname").val()+"&number=" + $("#txtnumber").val()+"&add=" + $("input:radio[#txtadd]:checked").val()+"&del=" + $("#txtdel").val(),
url: "itemload.php",
dataType: "script",
success: function(msg){
$("#loading").hide();
$("#recontent").html(msg)
}
});
});
});
اگه بخواهید این اتفاق برای همه درخواست‌های ajax بیافته میتونید از متدهای global مربوط به ajax استفاده کنید.
$(document).on({
ajaxStart: function (){
$("#loading").show();
},
ajaxStop: function (){
$("#loading").hide();
}
});
haniye70
سه شنبه 11 تیر 1392, 22:51 عصر
متشکر از شما میشه یکم بیشتر توضیح بدید اخه من زیاد از جاوا سر در نمیارم :خجالت:

الان $("#loading").show(); اضافه شد الان باید چیکار کنم کجا باید نوشته و تصویر لودینگ رو قرار بدم
jalil_gh
سه شنبه 11 تیر 1392, 23:01 عصر
این قسمت مربوط میشه به html و css. شما میتونید تصویر رو به انتهای فایل html اضافه کنید و css رو هم جوری تنظیم کنید که تصویر وسط صفحه به نمایش در بیاد. برای مثال اگه تصویری با طول و عرض ۱۰۰ پیکسل در اختیار دارید میتونید از روش زیر استفاده کنید.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#loading {
position:fixed;
top:50%;
left:50%;
margin-top: -50px;
margin-left: -50px;
z-index: 1000;
}
</style>
</head>
<body>
<!-- some other tags here -->
<img src="loading.gif" id="loading" style="display:none;">
</body>
</html>
haniye70
سه شنبه 11 تیر 1392, 23:08 عصر
آقای متشکر فقط یه مورد این الان کار میکنه ولی همش تصویر رو نشون میده؟ چرا بعد از لود غیر فعال نمی شه؟
jalil_gh
سه شنبه 11 تیر 1392, 23:12 عصر
کدتونو بزارید.
تو مثال اولیم کد مربوط به مخفی کردن رو باید تو متد complete میزاشتم که اشتباهی تو success گذاشتم. شاید اشکال از اونه.
haniye70
سه شنبه 11 تیر 1392, 23:16 عصر
عالی بود متشکر من حواسم نبود

$("#loading").hide();

رو نزاشته بودم

مرسی
haniye70
سه شنبه 11 تیر 1392, 23:19 عصر
سوال اخر ببخشید مزاحم شما میشم

اگه بخوام یک div رو که درونش هم نوشته و هم تصویر باشه چیکار باید کنم
//////////////////////
<div id="loading" style="display:none;
حل شد با تشکر از شما