parsgreen.com
article

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

javascript-loading

همان طور که می دانیم، از جاوا اسکریپت (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>
<!-- webgoo.ir -->
<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();">
ذکر این نکته نیز ضروری است، برخی مواقع ممکن است به دلیل وجود اسکریپت ها یا ابزارهای سوم شخص (منظور برنامه هایی است که از یک سرور دیگر در صفحه شما بارگذاری می شوند)، فرآیند بارگذاری کامل صفحه مدت زمان زیادی طول بکشد، لذا توصیه می شود با در نظر گرفتن سایر شرایط از این امکان استفاده نمائید.
sectionدسته بندی: آموزش کاربردی » JavaScript
related مطالب بیشتر:
» ساخت پنل چند سربرگی (tabbed panel) با جاوا اسکریپت و CSS
» چگونه لوگوی حمایتی برای نمایش در سایت یا وبلاگ بسازیم؟
» کنترل و تغییر اندازه فونت صفحه با جاوا اسکریپت
» ساخت افکت رنگی با جاوا اسکریپت (Javascript)
» نمایش پیام در بالا یا پائین صفحات وبلاگ و سایت با جاوا اسکریپت
commentنظرات (۲۲ یادداشت برای این مطلب ارسال شده است)
نویسنده: soli
زمان: ۲۰:۲۳:۴۵ - تاریخ: ۱۳۹۱/۰۶/۱۲
مثل همیشه عالی...
نویسنده: اسماعیل
زمان: ۱۳:۴۲:۴۸ - تاریخ: ۱۳۹۱/۰۸/۲۶
سلام
در مورد ویژگی position در css و کمی هم در مورد تکه کد جاوا اسکریپت بگین! مثلا این قسمت
if (document.getElementById){
document.getElementById('loading').style.visibilty='hidden';
}
دقیقا چه کاری می کنه و از کجا بیشتر یاد بگیریم
پاسخ: 
سلام
خاصیت position در css حالت شناور یا ثابت بودن یک بلاک را مشخص می کند که خود چند مقدار دارد، از جمله absolute , relative و fixed، مقادیر absolute حالت شناور بودن نسبت به عنصر اصلی صفحه که معمولا تگ html است را مشخص می کند.
اما دستور document.getElementById مربوط به زبان جاوا اسکریپت است، به این ترتیب می توان بر روی عناصر html که id مشخص دارند تاثر گذاشت، به فرض style.visibilty حالت visibilty بلاک مقصد را تغییر می دهد.
برای درک بهتر کدها باید css و javascript را از پایه یاد بگیرید.
نویسنده: E99
زمان: ۱۰:۴۷:۳۴ - تاریخ: ۱۳۹۱/۰۸/۲۷
اموزش مقدماتی جاوا اسکریپت رو از سایتتون خوندم اما در مورد get element توضیحی ندادین این متدها رو از کجا یاد بگیریم
پاسخ: 
آموزش های مقدماتی سایت هنوز کامل نشده اند و به تدریج این کار انجام می شود، اما شما می توانید با جستجو در وب به هدفتان برسید، منابع آموزشی در این خوصوص وجود دارد.
نویسنده: مصطفی
زمان: ۲۰:۰۲:۳۱ - تاریخ: ۱۳۹۱/۱۱/۲۲
دمتون گرم یعنی این اینقدر ساده بود من کلی دنبالش میگشتم!!!!!!
اصلا فکر نمیکردم با onload کار میکنه فکر میکردم یه تابع دیگه ای حتما هست که من نمیدونستم :)
دستتون درد نکنه
پاسخ: 
خواهش می کنیم، خوشحالیم که آموزش مفید بوده.
نویسنده: reza
زمان: ۰۱:۵۸:۳۳ - تاریخ: ۱۳۹۱/۱۱/۲۶
سلام
ببخشید این سوال و این جا مطرح می کنم.
چرا بعضی از سایت ها قالب هاشون با اینکه کدنویسی جاوا توش انجام شده بروزر هیچ اروری مبنی بر تایید جاوا نمیده ولی قالبی که من داخلش اسکریپت دارم بروزر ازم تاییدیه میخواد؟
اصلا کدی وجود داره که داخل قالب ازش استفاده کرد تا مرورگرها بدون تنظیم دستی جاوا اسکریپت اونا رو نمایش بده یا همون اجرا کنه؟
پاسخ: 
سلام
البته منظور دقیق سوال شما مشخص نیست، جاوا اسکریپت به طور معمول در مرورگرها فعال است و اغلب کدهای آن بدون دخالت کاربر اجرا می شود، مگر کدهای خاصی که به امنیت سیستم ارتباط دارد یا اینکه باعث آزار کاربر می شود (مانند صفحات pop up ناخواسته)، در این مورد هم سایت ها و وبلاگ هایی که بدون تایید، صفحات را نمایش می دهند، در واقع از یک روش غیر مستقیم استفاده می کنند که نوعی تایید است، به طور مثال کاربر روی دکمه دانلود کلیک می کند و هم زمان با اجرای دانلود چند صفحه نیز کنار آن باز می شود (این روش یک نوع تایید باز شدن آن صفحات است، چون کاربر بر روی دکمه کلیک می کند).
نویسنده: reza
زمان: ۲۰:۳۰:۵۲ - تاریخ: ۱۳۹۱/۱۱/۲۶
با سلام
فکر کنم بد عنوان کردم. مثلا من از چند تا کد jquery واسه قالب استفاده کردم مثل گالری عکس . وقتی تو ie اجراش میکنم (از اونجایی که جاوا اسکریپت رو داخلش فعال نکردم) این کدها تا زمانی که من اجازه اجرای جاوا رو ندم اجرا نمیشن در صورتی که قالبها یا سایت هایی رو توسط همین ie تست کردم با اینکه حاوی کدهای جاوا است ولی هیچ گونه بلاکی توسط مرورگر انجام نمیشه. حالا در کل این رو میخوام که قالب من همراه با کدهای جاوا از طرف هیچ مرورگری بلاک نشه.
پاسخ: 
سلام
این مورد ممکن است چند دلیل داشته باشد که البته جواب دقیق را تنها با بررسی سورس کدها و تنظیمات مرورگر می توان داد، اما به طور کلی مرورگر IE به چند دلیل از یک صفحه ممکن است ایراد جاوا اسکریپت داشته باشد، حالت اول این که صفحه به صورت آفلاین دیده شود، به فرض صفحه بر روی هارد ذخیره شده باشد، در این حالت مرورگر یک اخطار امنیتی نمایش می دهد و در صورت تایید کدهای جاوا اسکریپت اجرا می شوند، حالت دوم وجود خطا در کدهای جاوا اسکرپت است که در نسخه های قدیمی تر باعث نمایش پنجره خطا می شود و در نسخه های جدیدتر گوشه پائین سمت چپ عبارتی مبنی بر Error نمایش داده می شود و اگر روی آن کلیلک کنید، دلیل و خط خطا مشخص است.
خارج از این موارد دلیل خاص دیگری وجود ندارد.
نویسنده: reza
زمان: ۰۲:۰۱:۴۶ - تاریخ: ۱۳۹۱/۱۱/۲۷
با سلام و خسته نباشد
دقیقا همون آفلاین اجرا شدنه بود چون php نبود دلیلی نمی دیدم از لوکال اجراش کنم.
سایتتون رو دنبال میکنم و ارزش کارتون رو خوب درک میکنم واسه همین میگم واقعا خسته نباشید و از اینکه در حال ارائه خدمات به طور رایگان و پایه ایی برای یک ایرانی هستید! ممنونم
پاسخ: 
سلام
خواهش می کنیم، نظر لطف شما است.
نویسنده: Sr
زمان: ۲۱:۴۹:۰۶ - تاریخ: ۱۳۹۱/۱۲/۲۱
سلام ، ممنون واسه آموزش هایی که بی منت در اختیار ما قرار می دهید :)
نویسنده: zahra
زمان: ۱۱:۲۳:۱۳ - تاریخ: ۱۳۹۲/۰۲/۰۲
ممنون ميشم اگه در مورد تابع waitPreloadPage
توضيح مختصري بدين
آخه من كد را گذاشتم اتفاقي نمي افته
پس چه موقع پيغام لطفا منتظر بمانيد را نشون ميده
پاسخ: 
تابعی که عنوان کردید در این آموزش وجود ندارد!
در مورد اینکه اتفاقی نمی افتد چند دلیل ممکن است داشته باشد:
- کد را به نحو صحیح و مطابق آموزش درج نکرده اید.
- از این کد به صورت آفلاین (به طور مثال در لوکال هاست) استفاده می کنید که در این صورت چون صفحه به سرعت بارگذاری می شود، پیامی نیز نشان داده نمی شود.
برای پاسخ دقیق تر نیاز به بررسی صفحه ای است که کد را در آن قرار می دهید.
نویسنده: علی
زمان: ۲۲:۴۱:۵۷ - تاریخ: ۱۳۹۲/۰۵/۰۵
سلام خسته نباشید قبل از هر چیز بگم که کم مونده بود از خوشحالی بال در بیارم وقتی با سایتتون اشنا شدم واقعا مطالب مفیدی داره ایشالا روز به روز پیشرفت داشته باشید
سایتتون رو هم به علاقه مندی های مرورگرم اضافه کردم
-------------
سوال : پوسته وب سایت من فرمت tpl داره می نمیتونم از
<script type="text/javascript">
ها استفاده کنم چون اخطار میده
به نظر شما راه حلش چیه؟
پاسخ: 
سلام
نظر لطف شما است، در مورد سوال:
از چه CMS یا برنامه ای برای مدیریت سایتتان استفاده می کنید؟، فایل های tpl قابلیت درج کدهای HTML و به تبع جاوا اسکریپت را دارند، لذا خطا ارتباطی به tpl بودن فایل ندارد، چه خطایی دریافت می کنید؟
نویسنده: علی
زمان: ۱۱:۳۲:۲۴ - تاریخ: ۱۳۹۲/۰۵/۰۶
یه مدیریت محتوای شخصی که مربوط به اشتراک عکس میشه
----------
به عنوان مثال من از این دستور برای به روز کردن خودکار متن کپی رایت استفاده می کنم
<script type="text/javascript">
var now = new Date();
var startYear = "2005";
var text = "Copyright &copy; ";
if (startYear != '')
{
text = text + startYear + "-";
}
text = text + now.getFullYear() + ", Army Ants. All rights reserved";
var copyrightnotice = document.getElementById('copyrightnotice');
copyrightnotice.innerHTML = text;
</script>
و در نهایت وقتی وارد صفحه اصلی سایت میشم با چنین پیامی مواجه میشم
Fatal error: Smarty error: [in C:\xampp\htdocs/templates/b2b/index.tpl line 6]: syntax error: unrecognized tag 'text' (Smarty_Compiler.class.php, line 590) in C:\xampp\htdocs\library\smarty\libs\Smarty.class.php on line 1093
همش زیر سر این فایل Smarty.class.php هستش ولی نمیدونم کجاش و چرا این محدودیت رو بهش اضافه کردن
پاسخ: 
برنامه مدیریت سایت شما از smarty استفاده می کند، در این سیستم علامت {} معنی خاصی دارد و برای دستورات درونی استفاده می شود، لذا برای نادیده گرفتن سایر علامت های {} که دستوری نیستند، باید از تگ literal استفاده شود، مثال:
{literal}
<script type="text/javascript">
var now = new Date();
var startYear = "2005";
var text = "Copyright &copy; ";
if (startYear != '')
{
text = text + startYear + "-";
}
text = text + now.getFullYear() + ", Army Ants. All rights reserved";
var copyrightnotice = document.getElementById('copyrightnotice');
copyrightnotice.innerHTML = text;
</script>
{/literal}
اطلاعات بیشتر:
smarty.net
نویسنده: علی
زمان: ۱۴:۳۹:۲۴ - تاریخ: ۱۳۹۲/۰۵/۰۶
من واقعا شرمنده شما شدم اگه بدونید واسه خاطر ندونستن این تگ literal چقد بدبختی کشیدم
از سایت پشتیبانیش حتما استفاده می کنم
اقا یه دنیا ممنون که دانش خودتون رو با دیگران به اشتراک میذارید خسته نباشید
دیگه ما کاربر وب سایت شما هستیم و خواهیم بود
سپاس فراوان
نویسنده: علی
زمان: ۱۴:۴۸:۳۷ - تاریخ: ۱۳۹۲/۰۵/۰۶
یک سوال دیگه هم برام پیش اومد از دستوارت php چطوری استفاده کنم؟
مثال :
<?php
دستورات
?>
من می خوام سیستم امار سایت رو تو قالب بذارم تو یکی از ستون ها برای همچین دستوارتی باید چی کار کرد مثلا از چه تگی استفاده کنم همین اموزشی که شما گذاشته بودین
نمایش آمار سایت، این رو چه جوری نمایش بدم
پاسخ: 
می توانید کدها را داخل تگ php قرار دهید:
{php}
کدهای PHP
{/php}
اطلاعات بیشتر:
smarty.net/docsv2/en/language.function.php
نویسنده: علی
زمان: ۱۶:۰۱:۵۹ - تاریخ: ۱۳۹۲/۰۵/۰۶
حالا فهمیدم چی به چی
لینکی هم که دادید رو کامل مطالعه میکنم
Smarty 2 Latest Stable Release
Smarty 2.6.27 (.tar.gz) (.zip) Sep 25th, 2012
Smarty 2 Previous Releases
Smarty 2.6.26 (.tar.gz) (.zip) June 18th, 2009
مال من 26 بود که نسخه جدیدترش رو دریافت کردم
دستتون در نکنه باور کنید 80 درصد مشکلم رو حل کردید
ممنون
پاسخ: 
پشتیبان گیری قبل از اعمال تغییرات فراموش نشود!
نویسنده: علی
زمان: ۰۸:۲۲:۲۰ - تاریخ: ۱۳۹۲/۰۵/۰۷
استاد ببخشید که دوباره مزاحم میشم
تو گوگل سرچ کردم نتونستم حتا یه کتاب یا فایل pdf اموزشی که در مورد زبان smarty باشه پیدا کنم
ممنون میشم سایت یا کتابی رو بهم معرفی کنید
پاسخ: 
smarty یک زبان نیست، یک موتور قالب نوشته شده به PHP است، باید از سایت و انجمن آن استفاده کنید.
paged صفحه 1 از 2




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

7 × 7
 refresh
آگهی
seonab.com
طراحی نرم افزار اندروید
رنگین کمان عکس
Ranginkamaan.com

آرشیو عکس های باکیفیت با موضوعات متنوع...