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

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

قبل از هر چیز برای نمایش پیام و تصویر در حال بارگذاری یا Loading باید در سورس HTML صفحه تگی با ID مشخص جهت نمایش پیام و انیمیشن یا تصویر تعریف کنیم، این تگ ترجیحا می تواند به صورت تگ div باشد برای نمونه کد زیر را پس از تگ body درج می کنیم، این قسمت در واقع همان بلاکی است که پیام و انیمیشن یا تصویر "صفحه در حال بارگذاری است... لطفا شکیبا باشید!" یا هر متن دلخواه دیگری را نمایش می دهد.

<div id="loading-main">
<div id="loading-animation"></div>
در حال بارگذاری... <br> لطفا چند لحظه صبر کنید!
</div>

در این نمونه کد از پیام متنی و انیمیشن مبتنی بر دستورات CSS برای ایجاد تصویر متحرک کمک گرفته ایم که در ادامه به آن خواهیم پرداخت، نکته مهم در این نمونه کد در نظر گرفتن آی دی یکتا برای تگ های div است که به صورت عبارات loading-main و loading-animation تنظیم شده است، از این آی دی ها برای استایل دهی و شناسایی تگ توسط دستورات جاوا اسکریپتی که در ادامه خواهیم دید استفاده کرده ایم.

سفارشی سازی ظاهری و شناور کردن بلاک با استایل 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>

پیش نمایش آنلاین