تماس با ما

موبایل: 2565 038 0912

دفتر تهران: 2565 2842 021

دفتر گرگان: 2565 3233 017


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

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


<!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>
<!-- sefaresh.net -->
<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>

توضیح:
برای اینکه این کد در سایت یا وبلاگ شما عمل کند باید چند کار را به شرح زیر انجام دهید.
- ابتدا کد جاوا اسکریپت زیر را در قسمت بالای قالب و بین تگ های <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 آشنایی داشته باشید، به راحتی می توانید موارد مورد نظر خود را به صورت سفارشی تغییر دهید.
- کد زیر را ترجیحا پس از تگ body درج کنید؛ این کد در واقع همان بلاکی است که پیام "صفحه در حال بارگذاری است..." در آن نشان داده می شود.


<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();">

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


سفارش طراحی سایت

سفارش طراحی سایت

google
yahoo
alexa
ebook
Baidu.com
Wikipedia
Blogger.com
Windows Live
Amazon.com
eBay
Bing
Ask
استانداری گلستان
f shdj, sefaresh, sefaresh .net, sefaresh.net, sthva, sthva nhj kj, sthva.kj, stthva.kj, xvhpd, آیفون, استفاده, اندروید, اپل, اپلیکیشن, اینترنت, باتری, بازار, بازی, دستگاه, دوربین, سامسونگ, سفارش, سفارش دات نت, سفارش دات نت sefaresh.net, سفارش.نت, سیستم, طراح وب, طراحي وب سايت, طراحی, طراحی وب سایت, فناوری, مایکروسافت, موبایل, هوشمند, کاربران, کمپانی, گلکسی, گوشی, گوشی هوشمند, گوگل

نمایش تمامی تگ ها
بسته ویژه مدارس مدارس
بسته ویژه پزشکان پزشکان
بسته ویژه مهندسین مهندسین