استفاده از آیکون لودینگ برای سایت های ایجکس؟ [بایگانی]

armintirand

یک شنبه 22 مرداد 1391, 16:42 عصر

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

hossin.esm

سه شنبه 24 مرداد 1391, 16:24 عصر

یک مثال ساده نوشتم
به جای div لودینک میتونی تصویر و غیره بگذاری

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4)
{
if(xmlhttp.status==200)
{
//محل برداشتن کد لودينگ
document.getElementById("loading").innerHTML='';
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
else
{
//خطا در لود کردن
document.getElementById("loading").innerHTML='خطا در بار گزاري';
}
}
}
// کد لودينگ
document.getElementById("loading").innerHTML='خطا در بار گزاري';
xmlhttp.open("GET","ajax.txt",true);
xmlhttp.send();
}
</script>
</head>
<body>

<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<div id="loading"> </div>
<button type="button" onclick="loadXMLDoc()">Change Content</button>

</body>
</html>