چهارشنبه ۰۹ اسفند ۱۴۰۲

Wednesday, February 28, 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
نمایش کادر پیام شناور در سایت و وبلاگ با جاوا اسکریپت
ساخت دکمه رفتن به بالای صفحه (Scroll to Top) با جاوا اسکریپت
ساخت منوی آکاردئونی با جاوا اسکریپت و CSS
اعتبارسنجی فرم های وب با جاوا اسکریپت (JavaScript)
دیدگاه
more ۳۲ دیدگاه برای این مطلب ارسال شده است.
more دیدگاه جدید بر اساس تاریخ ارسال در انتهای دیدگاه های موجود نمایش داده می شود.
بهاره هوشمندی
۱۶:۵۵ ۱۴۰۲/۱۰/۲۳
با تشکر از شما استاد بزرگوار
اینو تست کردم لینک رو به درستی شناسایی نمی کنه و ارور میده! وگرنه همون مسیر خودش رو واسه لینک هست! نمیشه کاری کرد فرآیند بصورت continue عمل کنه و لینک رو وارد نکنیم؟ الان چند بار تست کردم لینک رو ثابت نگه می داره و واسه finish نمیره نمیشه کاری کرد واسه لینک عمل continue اجرا بشه؟ الان من پیام رو توی صفحه کال بک می بینم ولی لینک ثابت هست و به همین خاطر ارور میده در حال عادی بعد از این فرآیند به صفحه finish میره توی دستور die نمیشه کاری کرد که continue اجرا بشه؟
فکر کنم اینطوری مشکل منم حل میشه
با تشکر
متاسفانه علی رغم اینکه گفتیم رفع مشکل نیاز به تست واقعی دارد آدرسی ارسال نکردید که ما بتوانیم تست کنیم و صرفا با حدس و گمان و طبق توضیحات شما راهنمایی می کنیم، یک برنامه ممکن است جزئیات خیلی زیادی داشته باشد که از نظرها پنهان است و صرفا فعل و انفعالات ظاهری نیست، اصولا این نوع موارد جزء خطایابی عملی راه حلی ندارند، هرچند تغییرات می توانند خیلی ساده باشند اما تا وقتی مشکل به درستی پیدا نشود معما هم آسان نمی شود!
بهاره هوشمندی
۲۱:۱۷ ۱۴۰۲/۱۰/۲۳
توی اکشن callback فقط کوئری ها هستند و من دستور die رو جای مناسب گذاشتم چون جای دیگه نمیشه گذاشت! این کوئری ها هستند که سرعت سرور رو کم کردن تعداد دستورات بالای ۲۵۰ تا هستند چند روز پیش ۴۲ تا دستور رو حذف کردم ولی بازم زمان زیادی درگیر میشه فقط با دستور die میشه پیام رو به کاربر نشون داد چون همانطور که گفتم ویو نداره الان فقط یه روش مونده امتحانش کنم اینکه توی دستور die فرآیند بصورت continue اجرا بشه و هیچ لینکی مسیر کال بک به فینیش رو تغییر نده یه بار مسیر فینیش رو بهش دادم و رفت به اون مرحله فقط کوئری ها هیچ کدوم اجرا نشدن
لینک تست:
حذف شد
با تشکر
لینک بررسی شد، ظاهرا پاسخ به درخواست کاربر در بخش سرور به کلی تاخیر دارد یعنی کدهای شما به صورت داخلی در سرور کند عمل می کنند و در نهایت پاسخ در یک مرحله دریافت و کاربر به آدرس finish هدایت می شود، با این تفاسیر die نمی تواند هرجایی درج شود و باید جایی باشد که عملکرد برنامه را ناقص تمام نکند، آدرس انتقال هم باید از کدهای برنامه شما به دست بیاید که همان URL صفحه finish است، با این تفاسیر نیاز به ویرایش اساسی اسکریپت اجرا کننده تراکنش است که کار زمانبری خواهد بود و احتمالا ابتدا نیاز به درک ساختار کدنویسی و روند اجرای برنامه است، به نظر نمی رسد این تغییر طوری باشد که خودتان بتوانید به راحتی انجام دهید، متاسفانه به جهت زمانبر بودن امکانش برای ما هم میسر نیست.
در مرورگر دکمه F12 را بزنید و جزئیات بارگذاری صفحه را در قسمت Network مشاهده کنید، می بینید که تاخیر در پاسخ دارد.
more لطفا پیش از ارسال دیدگاه نکات زیر را مد نظر داشته باشید:
- به سوالات کلی، زمانبر، مبهم و مشکلاتی که تلاشی برای رفع آنها نکرده باشید پاسخ مختصر داده شده یا به بخش برنامه نویسی اختصاصی ارجاع داده می شوند.
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین یا به صورت حساب موقت و آزمایشی قرار دهید تا امکان بررسی دقیق مشکل و خطایابی میسر باشد.
- تمام دیدگاه های ارسالی خوانده شده و برای هر کاربر مدت زمان لازم جهت پاسخگویی در نظر گرفته می شود، لطفا از طرح سوالات متعدد در بازه زمانی کوتاه خودداری کنید.



 refresh
10 × 10
4 × 3
20 × 20
=
آخرین دیدگاه ها
more برای دسترسی سریع به یادداشت مربوطه می توانید از لینک مطلب در کادر زیر استفاده کنید.
پـــرتو
سلام خوبید؟ ببخشید مزاحم میشم یه سوال کامپیوتری داشتم اونم اینکه این خطای dll یعنی چی و چطوری رفع میشه ؟ بیشتر توی نرم افزارها...
۱۴۰۲/۱۲/۰۵

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

سعید
با تشکر از شما درست شد فقط یه مشکلی دارم میخوام شناسه اون مطلب رو اینطوری براش فراخوانی کنم ولی شناسه رو دریافت...
۱۴۰۲/۱۲/۰۲

سعید
با تشکر از شما خیلی خوب بود. فقط یه مشکلی داره، اگه لینک دانلود داخل عکس باشه کار نمی کنه و بازم لینک رو...
۱۴۰۲/۱۲/۰۲

سعید
با سلام و خسته نباشید من یه تابع با php میخوام که لینک های موجود در یک متن رو برام شناسایی کنه بعد به...
۱۴۰۲/۱۲/۰۱

روح اله
سلام چرا وبلاگ من در نتایج یاهو میاید ولی در نتایج گوگل نمیاید؟
۱۴۰۲/۱۱/۲۶

جواد
سلام خسته نباشید. من میخواستم تعداد نامحدودی عدد رو با هم جمع و تفریق کنم از کدوم حلقه باید در public function کلاسم استفاذه...
۱۴۰۲/۱۱/۲۵

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

پـــرتو
سلام خوبید؟ ممنون از راهنماییتون من ادرس وبلاگ رو براتون ایمیل کردم واقعا ممنونم مچکرم مرسی
۱۴۰۲/۱۱/۱۸

پـــرتو
سلام خسته نباشید ببخشید مزاحم میشم سوال قبلیم رو یادتونه که گفته بودم یه کد بدین که بشه عکس های داخل پست رو فیکس کنه...
۱۴۰۲/۱۱/۱۵

فاطمه
سلام وقت بخیر وب بازدید کننده داره ولی گویا آدرس وب برای برخی از افراد باز نمیشه چه کاری میتونم انجام بدم تا...
۱۴۰۲/۱۱/۰۹

سیاوش آهی
سلام وقت بخیر استاد، من در سایتم ویدیوهای اموزشی دارم و میخوام با دستورات htaccess امکان دانلود آن را غیرفعال کنم ولی در مرورگر (سایت)...
۱۴۰۲/۱۱/۰۷

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

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

پـــرتو
سلام خسته نباشید ببخشید مزاحم میشم می خواستم یه سوال بپرسم اونم اینکه من یه مشکلی کدم داره اینکه عکس وقتی داخل پست می گذارم...
۱۴۰۲/۱۰/۲۸

مریم
سلام. من از قالب های سایت پیچک که استفاده میکنم مطالب رو نشون نمیده و به جاش مینویسه archive title. اما از قالب های پیش...
۱۴۰۲/۱۰/۲۶

بهاره هوشمندی
توی اکشن callback فقط کوئری ها هستند و من دستور die رو جای مناسب گذاشتم چون جای دیگه نمیشه گذاشت! این کوئری ها هستند که...
۱۴۰۲/۱۰/۲۳

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

بهاره هوشمندی
با سلام استاد با sleep نمیشه متن به کاربر نشون داد فقط میشه تاخیر ایجاد کرد واسه همین die بهتره ولی من نمی دونم...
۱۴۰۲/۱۰/۲۳

بهاره هوشمندی
با سلام و خسته نباشید واسه ترجمه از این تابع استفاده میکنم
۱۴۰۲/۱۰/۲۲

بهاره هوشمندی
با سلام متاسفانه هرکاری کردم نشد! یه هفته ست درگیرش هستم انگار هیچ راهی نداره البته احتمالا به دستور die باشه ولی اون...
۱۴۰۲/۱۰/۲۱

بهاره هوشمندی
با سلام و خسته نباشید وقتی میخوام با گوگل ترانسلیت متنی رو با php ترجمه کنم عکس ها رو خراب می کنه چون توی...
۱۴۰۲/۱۰/۲۱

بهاره هوشمندی
من تونستم یه جوری کدها رو توی قالب بذارم ولی چون کال بک اصلا فایل ویو نداره و یک چک کنه است هیچ جوری پیام...
۱۴۰۲/۱۰/۱۹

بهاره هوشمندی
با تشکر از شما من فقط اکشنش رو دارم که اکشن به تنهایی کار نمی کنه! :( الان این کد رو توی قالب...
۱۴۰۲/۱۰/۱۹

بهاره هوشمندی
با سلام و با تشکر از شما استاد خیلی خوب بود من توی فریمورک yii صفحه callback ندارم کاربر زمان زیادی برای اکشن...
۱۴۰۲/۱۰/۱۸

بهاره هوشمندی
با سلام لینک رو نگاه کردم خوب بود ولی من میخوام برای کاربر بنویسم که تا ۱۰ ثانیه صبر کنه که کاربر صفحه رو...
۱۴۰۲/۱۰/۱۸

بهاره هوشمندی
با سلام و خسته نباشید استاد لود کردن کوئری های سایت من واسه یه صفحه زیاده و ۱۰ تا ۱۵ ثانیه طول میکشه که...
۱۴۰۲/۱۰/۱۷

سجاد مهدوی
با سلام ببخشید می تونید توی سایت نوبیتکس ثبت نام کنید و با api هایی که دادن یه کد بنویسید که اعلام موجودی رو...
۱۴۰۲/۱۰/۱۰
  در انتظار بررسی: ۱
 پاسخگویی به سوالات ممکن است تا ۲۴ ساعت زمان ببرد.