تصویر لودینگ سایت

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


برای اینکار شما یک تصویر لودینگ رو از اینترنت دانلود کنید که معمولا پسوند این نوع فایل بدلیل انیمیشنی بودن gif هست
سپس در اولین خط بعد از تگ body صفحه مورد نظرتون یک div ایجاد کنید و داخل این دیو یک تگ img قرار دهید
فایل لودینگی که دانلود کردید رو در مسیر پروژه خودتون قرار بدید و خاصیت src تگ img رو به همان مسیر تنظیم کنید
حالا یکسری ویژگی های باید به اون div بدید تا وقتی نمایش داده میشه ، اولا در سطح بالاتر از عناصر نسبت به چشم ما قرار بگیره که این کار رو با خاصیت z-index انجام میدیم و از طرفی هم کل عرض و ارتفاع صفحه رو پوشش بده که اینکار رو هم با خواص width:100%  و height:100% انجام میدیم
شما باید خاصیت postion این دیو رو بر روی مقدار fixed ست کنید.
پس استایل های زیر رو به div دربردارنده تصویر لودینگ خودتون بدید :
    

<!--Progress bar start-->
<div id="prog" style="
position: fixed;
width: 100%;
background-color: #1c2a3e;
z-index: 99999;
height: 100%;
overflow: hidden;">

         <img src="images/loading.gif">

</div>


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

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

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

<script>
    $(window).on('load', function() {
        $("#prog").hide();
    });

</script>

در بخش بدنه این تابع ما با استفاده از سلکتور جی کوئری div لودینگ خودمون رو که در بالای صفحه قرار داده بودیم و من با یک id بنام prog مشخص کردم رو مخفی میکنیم.
به همین راحتی
امیدوارم آموزش امروز هم براتون مفید بوده باشه

در صورتیکه سوالی درباره آموزش داشتید از طریق ID تلگرام من که در کانال درج شده در ارتباط باشید
ارادتمند مهدی حسامی