جاوا اسکریپت-نمایش پیام صفحه در حال بارگذاری

sky boy

متخصص بخش برنامه نویسی

ویژگی های خوب این زبان اسکریپت نویسی و مهم تر از همه، ویژگی سمت کاربر بودن آن، این امکان را به ما میده
تا در موقعیت های متفاوت، بر نحوه پردازش صفحه در مرورگر کنترل داشته باشیم،
یکی از این موقعیت ها زمانی است که صفحه سایت یا وبلاگ در حال بارگذاری هست، برای این کار در جاوا اسکریپت رویدادی به نام onLoad وجود داره
که دقیقا با همین هدف، یعنی اجرای کدهای جاوا اسکریپت در زمانی که صفحه بارگذاری می شود، تعریف شده،

کد و آموزش نمایش پیام صفحه در حال بارگذاری

برای ایجاد یک پیام "صفحه در حال بارگذاری است..." کافیه از نمونه کد زیر در قالب سایت یا وبلاگ خودتون استفاده کنید؛
به این صورت پیش از اینکه صفحه به طور کامل در مرورگر بارگذاری بشه، پیامی به کاربر نشون داده میشه و بعد از بارگذاری کامل، پیام محو میشه،
ویژگیه این نمونه کد:حداقل کدنویسی،همچنین سازگاری با مرورگرهای مختلف.

HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>بارگذاری</title>
<style type="text/css">
body{
    font-family:Tahoma, Geneva, sans-serif;
    font-size:12px;
    direction:rtl;
}
#loading{
    position:absolute;
    font-family:Tahoma, Geneva, sans-serif;
    font-size:12px;
    right:8px;
    top:8px;
    background-color:#FC0;
    layer-background-color:#FC0;
    height:25px;
    width:280px;
    display:block;
    border:#F60 1px solid;
}
</style>
<script type="text/javascript">
function pageLoading() {
    if (document.getElementById){
        document.getElementById('loading').style.visibility='hidden';
        }
    else{
        if (document.layers){
            document.loading.visibility = 'hidden';
        }
        else {
            document.all.loading.style.visibility = 'hidden';
        }
    }
}
</script>
</head>
<body onLoad="pageLoading();">
<div id="loading">
<img src="http://www.yoursite.com/image/loading.gif" border="0" alt="در حال بارگذاری" height="16" width="16" />
در حال بارگذاری... لطفا چند لحظه صبر کنید...!
</div>
</body>
</html>


 

sky boy

متخصص بخش برنامه نویسی

توضیح:
برای اینکه این کد در سایت یا وبلاگ شما عمل کنه باید چند کار انجام بدید.

- ابتدا کد جاوا اسکریپت زیر رو در قسمت بالای قالب و بین تگ های <head> قرار بدید.

کد:
<script type="text/javascript">
function pageLoading() {
    if (document.getElementById){
        document.getElementById('loading').style.visibility='hidden';
        }
    else{
        if (document.layers){
            document.loading.visibility = 'hidden';
        }
        else {
            document.all.loading.style.visibility = 'hidden';
        }
    }
}
</script>

دقت کنید که عبارات loading در تابع بالا، در واقع نام id بلاک div هستند که پیام در آن نشان داده می شود.
- سپس به استایل css صفحه خود، آی دی زیر را اضافه کنید؛
دقت کنید که آی دی دیگری با آن هم نام نباشد، در غیر این صورت باید نام آی دی را در کلیه قسمت ها تغییر دهید.

کد:
#loading{
    position:absolute; 
    font-family:Tahoma, Geneva, sans-serif; 
    font-size:12px; 
    right:8px; 
    top:8px; 
    background-color:#FC0; 
    layer-background-color:#FC0; 
    height:25px; 
    width:280px;
    display:block;
    border:#F60 1px solid;
}

اگر کمی با css آشنایی داشته باشید، به راحتی می توانید موارد مورد نظر خود را به صورت سفارشی تغییر بدید.
 

sky boy

متخصص بخش برنامه نویسی

در پایان کد زیر را ترجیحا پس از تگ body درج کنید؛
این کد در واقع همان بلاکی است که پیام "صفحه در حال بارگذاری است..." در آن نشان داده می شود.

HTML:
<div id="loading">
<img src="http://www.yoursite.com/image/loading.gif" border="0" alt="در حال بارگذاری" height="16" width="16" /> 
در حال بارگذاری... لطفا چند لحظه صبر کنید...!
</div>

دقت کنید که در این نمونه، از یک تصویر متحرک کوچک در ابعاد 16 در 16 پیکسل با فرمت gif در قسمت img src استفاده شده،
برای نمایش صحیح تصویر، باید آن را در یک سرویس، آپلود کنید و آدرس آن را جایگزین قسمت http://www.yoursite.com/image/loading.gif نمائید.
- در نهایت نیز برای اجرای کد، بین تگ body تابع را به شکل زیر فراخوانی کنید.

کد:
<body onLoad="pageLoading();">

ذکر این نکته ضروریه، برخی مواقع ممکنه به دلیل وجود اسکریپت ها یا ابزارهای سوم شخص (منظور برنامه هایی است که از یک سرور دیگر در صفحه شما بارگذاری می شوند)،
فرآیند بارگذاری کامل صفحه مدت زمان زیادی طول بکشد، توصیه میشه با در نظر گرفتن سایر شرایط از این امکان استفاده کنید.
 
بالا