یکشنبه ۲۷ خرداد ۱۴۰۳

Sunday, June 16, 2024 GMT +3:30

نمایش پیام در حال بارگذاری با جاوا اسکریپت (JavaScript)

javascript-loading

برای هدف های زیادی می توانیم از جاوا اسکریپت (JavaScript) در وب استفاده کنیم، قابلیت های متنوع و قدرت این زبان اسکریپت نویسی و مهمتر از همه ویژگی سمت کاربر (Client-side) بودن آن این امکان را به برنامه نویس می دهد تا در موقعیت های متفاوت بر فعل و انفعالات رابط کاربری صفحه کنترل داشته و عملکرد و پردازش های مرورگر را مدیریت کند، یکی از این موقعیت ها زمانی است که صفحه سایت یا وبلاگ در حال بارگذاری (Loading) است، بدین منظور در جاوا اسکریپت متدی به نام document.readyState و رویداد document.onreadystatechange وجود دارد که دقیقا با همین هدف یعنی شناسایی زمانی که صفحه وب کاملا بارگذاری می شود تعریف شده اند، به این صورت می توانیم مرحله قبل و بعد از بارگذاری صفحه را از هم تفکیک و به فرض پیامی مبنی بر شکیبایی تا بارگذاری کامل محتوا نمایش دهیم، ایجاد چنین قابلیتی به خصوص برای صفحاتی که دیتای حجیمی دارند می تواند به ارتقای رابط کاربری و عدم بستن صفحه توسط کاربر به دلیل طولانی شدن فرآیند Loading کمک کند، از این رو در مطلب پیش رو می خواهیم با استفاده از متد document.readyState با نحوه نمایش پیام و تصویر "در حال بارگذاری... لطفا چند لحظه صبر کنید!" آشنا شویم.

ایجاد تگ HTML نمایش پیام و تصویر در حال بارگذاری (Loading)


قبل از هر چیز برای نمایش پیام و تصویر در حال بارگذاری یا Loading باید در سورس HTML صفحه تگی با ID مشخص جهت نمایش پیام و انیمیشن یا تصویر تعریف کنیم، این تگ ترجیحا می تواند به صورت تگ div باشد برای نمونه کد زیر را پس از تگ body درج می کنیم، این قسمت در واقع همان بلاکی است که پیام و انیمیشن یا تصویر "صفحه در حال بارگذاری است... لطفا شکیبا باشید!" یا هر متن دلخواه دیگری را نمایش می دهد.
<div id="loading-main">
<div id="loading-animation"></div>
در حال بارگذاری... <br> لطفا چند لحظه صبر کنید!
</div>
در این نمونه کد از پیام متنی و انیمیشن مبتنی بر دستورات CSS برای ایجاد تصویر متحرک کمک گرفته ایم که در ادامه به آن خواهیم پرداخت، نکته مهم در این نمونه کد در نظر گرفتن آی دی یکتا برای تگ های div است که به صورت عبارات loading-main و loading-animation تنظیم شده است، از این آی دی ها برای استایل دهی و شناسایی تگ توسط دستورات جاوا اسکریپتی که در ادامه خواهیم دید استفاده کرده ایم.
JavaScript Page Loading

سفارشی سازی ظاهری و شناور کردن بلاک با استایل CSS


برای سفارشی سازی ظاهری و شناور کردن بلاک نمایش پیام و انیمیشن یا تصویر در حال بارگذاری (Loading) در بالاترین قسمت صفحه (ترجیحا مابین تگ های head) استایل CSS زیر را به سورس کدها اضافه می کنیم، این استایل به صورت شناور (position: absolute) است و از تکنیک keyframes و transform: rotate برای ایجاد حالت انیمیشن "دایره گردان" استفاده شده است.
<style>
#loading-main {
    display: block;
    position: absolute;
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 12px;
    color: #f0c;
    text-align: center;
    direction: rtl;
    width: 300px;
    height: 200px;
    line-height: 22px;
    top: 25%;
    bottom: 0;
    left: 0;
    right: 0;
    margin:0 auto;
}
#loading-animation {
    border: 12px solid #f5f5f5;
    border-top: 12px solid #999;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    margin: 0 auto;
    animation: spin 1s linear infinite;
}
@keyframes spin {
    100% {
        transform: rotate(360deg);
    }
}
</style>
دقت کنیم که فقط یک تگ در خروجی HTML سایت ما باید آی دی loading-main داشته باشد به عبارتی دیگر مقدار آی دی در صفحات وب یکتا است و نباید بین تگ های مختلف مشترک باشد، وجود آی دی همسان برای دو تگ مختلف باعث ایجاد مشکل در شناسایی عناصر صفحه خواهد شد.

کنترل نمایش و مخفی سازی بلاک با JavaScript


در حالت عادی و قبل از بارگذاری کامل محتوای صفحه وب بلاک loading-main به صورت مرئی و قابل روئیت است اما زمانی که فرآیند بارگذاری کامل می شود این بلاک باید مخفی شده و نمایش داده نشود، برای کنترل نمایش یا عدم نمایش بلاک و همچنین محتوای تگ body اسکریپت زیر را در کد قالب پس از تگ body و پس از بلاک loading-main درج می کنیم، این اسکریپت در واقع تابعی مبتنی بر متدهای document.readyState، document.querySelector، display و visibility است که با تغییر وضعیت بارگذاری صفحه در رویداد document.onreadystatechange قسمت های شرطی آن اجرا می شود.
<script>
document.onreadystatechange = function() {
    if(document.readyState !== "complete") {
        document.querySelector("body").style.visibility = "hidden";
        document.querySelector("#loading-main").style.visibility = "visible";
    } else {
        document.querySelector("#loading-main").style.display = "none";
        document.querySelector("body").style.visibility = "visible";
    }
};
</script>
رویداد document.onreadystatechange با هر تغییر وضعیت بارگذاری صفحه فراخوانی می شود و با بررسی مقدار متناظر متد document.readyState (شامل موارد loading, interactive, complete) می توانیم در صورتی که پاسخ complete بود (یا نبود) تصمیم بگیریم که کدام عنصر را به حالت مرئی و کدام مورد را مخفی کنیم.

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


همان طور که دیدیم برای ایجاد پیام "صفحه در حال بارگذاری است... لطفا کمی صبر کنید." به کمک جاوا اسکریپت کافی است از نمونه کدهای بالا به ترتیبی که گفتیم در قالب سایت یا وبلاگ خود استفاده کنیم، به این صورت پیش از اینکه صفحه به طور کامل در مرورگر بارگذاری شود پیامی به کاربر نشان داده می شود که بعد از تکمیل بارگذاری محو خواهد شد، در هر صورت برای جمع بندی توضیحات و تجمیع کدها در یک صفحه می توانیم نمونه کد زیر را بررسی و پیش نمایش آنلاین آن را امتحان کنیم ( با توجه به کش شدن تصویر در مرورگر احتمالا در حالت سرور-آنلاین فقط برای بار اول پیام بارگذاری را خواهیم دید اما برای بررسی بیشتر می توانیم کد را در صفحه ای بر روی دستکتاپ ذخیره کرده و با دستورالعملی که در انتها گفته ایم، فرآیند تست را بدون محدودیت به صورت لوکال-آنلاین انجام دهیم).
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>وبگو | نمایش پیام صفحه در حال بارگذاری</title>
<!-- Webgoo.ir -->
<style>
#webgoo-logo {
    display: block;
    position: absolute;
    background-color: #0E5076;
    width: 20%;
    height: 20%;
    top: 25%;
    bottom: 0;
    left: 0;
    right: 0;
    margin:0 auto;
    padding: 8px;
}
#loading-main {
    display: block;
    position: absolute;
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 12px;
    color: #f0c;
    text-align: center;
    direction: rtl;
    width: 300px;
    height: 200px;
    line-height: 22px;
    top: 25%;
    bottom: 0;
    left: 0;
    right: 0;
    margin:0 auto;
}
#loading-animation {
    border: 12px solid #f5f5f5;
    border-top: 12px solid #999;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    margin: 0 auto;
    animation: spin 1s linear infinite;
}
@keyframes spin {
    100% {
        transform: rotate(360deg);
    }
}
</style>
</head>
<body>
<noscript>جاوا اسکریپت در مرورگر شما پشتیبانی نمی شود یا غیرفعال است!</noscript>
<div id="loading-main">
<div id="loading-animation"></div>
در حال بارگذاری... <br> لطفا چند لحظه صبر کنید!
</div>
<script>
document.onreadystatechange = function() {
    if(document.readyState !== "complete") {
        document.querySelector("body").style.visibility = "hidden";
        document.querySelector("#loading-main").style.visibility = "visible";
    } else {
        document.querySelector("#loading-main").style.display = "none";
        document.querySelector("body").style.visibility = "visible";
    }
};
</script>
<!--
کدهای نمایش پیام در حال بارگذاری را در قسمت بالا درج کنید
کدهای مربوط به سایر محتوای صفحه را در قسمت پائین درج کنید
-->

<div id="webgoo-logo">
<a href="https://webgoo.ir" title="وبگو | آموزش برنامه نویسی و مهارتهای وب" target="_blank">
<!--
برای تست مجدد عملکرد کد در حالت لوکال-آنلاین، عبارت فرضی
py75mr3rtyuo1
را در قسمت
 src
 تغییر داده، صفحه را در دستکتاپ ذخیره کرده و آدرس مرورگر را رفرش کنید
 -->

<img id="logo-img" alt="Webgoo" src="https://webgoo.ir/image/webgoo.svg?ver=py75mr3rtyuo1">
</a>
</div>
</body>
</html>
پیش نمایش آنلاین
دسته بندی: آموزش کاربردی » JavaScript
related مطالب بیشتر:
ایجاد پنل جمع شونده با جاوا اسکریپت و فریم ورک Spry
چگونه لوگوی حمایتی برای نمایش در سایت یا وبلاگ بسازیم؟
اعتبارسنجی فرم های وب با جاوا اسکریپت (JavaScript)
ساخت افکت رنگی با جاوا اسکریپت (JavaScript)
ساخت منوی آکاردئونی با جاوا اسکریپت و CSS
دیدگاه
more ۳۲ دیدگاه برای این مطلب ارسال شده است.
more دیدگاه جدید بر اساس تاریخ ارسال در انتهای دیدگاه های موجود نمایش داده می شود.
بهاره هوشمندی
۱۶:۵۵ ۱۴۰۲/۱۰/۲۳
با تشکر از شما استاد بزرگوار
اینو تست کردم لینک رو به درستی شناسایی نمی کنه و ارور میده! وگرنه همون مسیر خودش رو واسه لینک هست! نمیشه کاری کرد فرآیند بصورت continue عمل کنه و لینک رو وارد نکنیم؟ الان چند بار تست کردم لینک رو ثابت نگه می داره و واسه finish نمیره نمیشه کاری کرد واسه لینک عمل continue اجرا بشه؟ الان من پیام رو توی صفحه کال بک می بینم ولی لینک ثابت هست و به همین خاطر ارور میده در حال عادی بعد از این فرآیند به صفحه finish میره توی دستور die نمیشه کاری کرد که continue اجرا بشه؟
فکر کنم اینطوری مشکل منم حل میشه
با تشکر
متاسفانه علی رغم اینکه گفتیم رفع مشکل نیاز به تست واقعی دارد آدرسی ارسال نکردید که ما بتوانیم تست کنیم و صرفا با حدس و گمان و طبق توضیحات شما راهنمایی می کنیم، یک برنامه ممکن است جزئیات خیلی زیادی داشته باشد که از نظرها پنهان است و صرفا فعل و انفعالات ظاهری نیست، اصولا این نوع موارد جزء خطایابی عملی راه حلی ندارند، هرچند تغییرات می توانند خیلی ساده باشند اما تا وقتی مشکل به درستی پیدا نشود معما هم آسان نمی شود!
بهاره هوشمندی
۲۱:۱۷ ۱۴۰۲/۱۰/۲۳
توی اکشن callback فقط کوئری ها هستند و من دستور die رو جای مناسب گذاشتم چون جای دیگه نمیشه گذاشت! این کوئری ها هستند که سرعت سرور رو کم کردن تعداد دستورات بالای ۲۵۰ تا هستند چند روز پیش ۴۲ تا دستور رو حذف کردم ولی بازم زمان زیادی درگیر میشه فقط با دستور die میشه پیام رو به کاربر نشون داد چون همانطور که گفتم ویو نداره الان فقط یه روش مونده امتحانش کنم اینکه توی دستور die فرآیند بصورت continue اجرا بشه و هیچ لینکی مسیر کال بک به فینیش رو تغییر نده یه بار مسیر فینیش رو بهش دادم و رفت به اون مرحله فقط کوئری ها هیچ کدوم اجرا نشدن
لینک تست:
حذف شد
با تشکر
لینک بررسی شد، ظاهرا پاسخ به درخواست کاربر در بخش سرور به کلی تاخیر دارد یعنی کدهای شما به صورت داخلی در سرور کند عمل می کنند و در نهایت پاسخ در یک مرحله دریافت و کاربر به آدرس finish هدایت می شود، با این تفاسیر die نمی تواند هرجایی درج شود و باید جایی باشد که عملکرد برنامه را ناقص تمام نکند، آدرس انتقال هم باید از کدهای برنامه شما به دست بیاید که همان URL صفحه finish است، با این تفاسیر نیاز به ویرایش اساسی اسکریپت اجرا کننده تراکنش است که کار زمانبری خواهد بود و احتمالا ابتدا نیاز به درک ساختار کدنویسی و روند اجرای برنامه است، به نظر نمی رسد این تغییر طوری باشد که خودتان بتوانید به راحتی انجام دهید، متاسفانه به جهت زمانبر بودن امکانش برای ما هم میسر نیست.
در مرورگر دکمه F12 را بزنید و جزئیات بارگذاری صفحه را در قسمت Network مشاهده کنید، می بینید که تاخیر در پاسخ دارد.
more لطفا پیش از ارسال دیدگاه نکات زیر را مد نظر داشته باشید:
- به سوالات کلی، زمانبر، مبهم و مشکلاتی که تلاشی برای رفع آنها نکرده باشید پاسخ مختصر داده شده یا به بخش برنامه نویسی اختصاصی ارجاع داده می شوند.
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین یا به صورت حساب موقت و آزمایشی قرار دهید تا امکان بررسی دقیق مشکل و خطایابی میسر باشد.
- تمام دیدگاه های ارسالی خوانده شده و برای هر کاربر مدت زمان لازم جهت پاسخگویی در نظر گرفته می شود، لطفا از طرح سوالات متعدد در بازه زمانی کوتاه خودداری کنید.



 refresh
10 × 10
1 × 5
20 × 20
=
آخرین دیدگاه ها
more برای دسترسی سریع به یادداشت مربوطه می توانید از لینک مطلب در کادر زیر استفاده کنید.
پرتو
سلام خوبید؟ خسته نباشید ببخشید مزاحم میشم ممنون از جوابتون راستش بعضی وقتا از بس سوالاتم زیاده روم نمیشه ازتون بپرسم مثل امشب که چیکار...
۱۴۰۳/۰۳/۱۳

پرتو
سلام خوبین؟ خسته نباشید یه سوال من منوی سمت راست قالبم نوشته هاش چسبیده به بردر باید چیکار کنم که درست شه؟ یعنی منظورم اینکه...
۱۴۰۳/۰۳/۰۹

پرتو
سلام خوبید؟ بلاکفا باز دچار مشکل شده یا فقط برای من دچار مشکل شده؟ منظورم اینکه خیلی دیر باز میشه و فقط برای فایرفاکس هم...
۱۴۰۳/۰۳/۰۱

سعیدی
سلام می تونید اینو اصلاح کنید؟ چون من با توضیحات شما یاد نگرفتم خیلی ممنون اگه یکبار اصلاح کنید واسه بعد یاد...
۱۴۰۳/۰۲/۲۲

سعیدی
دست شما درد نکنه وقتی اینطوری تغییر میدم و به class می نویسم کار نمی کنه و ارور میده
۱۴۰۳/۰۲/۲۱

سعیدی
دست شما درد نکنه خیلی خوب بود این یکی رو چطوری فراخوانی کنم؟ این واسه مناسبت هاست خیلی ممنون
۱۴۰۳/۰۲/۱۹

سعیدی
با سلام آیا می شه این تابع رو بصورت class نوشت؟ میخوام وقتی کد ملی میدم با این تابع فراخوانی بشه و شهر...
۱۴۰۳/۰۲/۱۹

پرتو
مگه شما دارین اموزشش رو؟ آدرسش رو میزارید؟ یا اگر سایتی رو میشناسید که آموزش داده باشه معرفی کنید ممنون میشم من خیلی گشتم توی...
۱۴۰۳/۰۲/۱۸

پــرتو
سلام خوبید ؟ خسته نباشید گوشی پدرم شیاومی هست ایمیلمو ثبت کردم داخلش بعد می خواستم حذفش کنم نمیشد می گفت همه داده های توی...
۱۴۰۳/۰۲/۱۶

vip
خیلی ممنونم از شما خیلی عالی شد میشه مثل تبلیغ بلاگفا باشه یعنی زیر صفحه نمایش داده بشه و صفحه رو سیاه نکنه که تا...
۱۴۰۳/۰۲/۰۵

vip
با سلام و خسته نباشید استاد چند وقت پیش این کد رو از شما گرفتم این کد خیلی خوبه و کاربر رو هم...
۱۴۰۳/۰۲/۰۴

پـــرتو
سلام خسته نباشید شرمنده مزاحم میشم یه سوال داشتم می خواستم بپرسم که چرا بلاگفا باز نمیشه برام؟ کلا هر وبلاگی که مربوط به بلاگفا...
۱۴۰۳/۰۲/۰۲
  در انتظار بررسی: ۰
 پاسخگویی به سوالات ممکن است تا ۲۴ ساعت زمان ببرد.