پیش بار گذاری یا حالت بارگذاری، چیزیست که قبل از آن که محتوای اصلی در صفحه وب سایت بارگذاری شود نمایش داده می شود. هدف اصلی از پیش بارگذار (preloader) سرگرم کردن و نگه داشتن بازدیدکننده تا زمان بارگذاری و نمایش محتوای سایت است.
برای ساختن یک پیش بارگذاری مراحل زیر را دنبال کنید.
مرحله اول: یک تگ div در ابتدای تگ body ایجاد کنید و به آن div یک کلاس یا شناسه بدهید. مثلا id=loading.
<body>
<div id="loading"><div>
</body>مرحله دوم: اکنون فایل css را به فایل html خود لینک کنید. همان طور که مشاهده می کنید در اینجا به شناسه loading استایل اضافه شده است.
#loading{
position: fixed;
width:100%;
height:100vh;
background:#fff;
url('https://example.gif')
no-repeat center;
z-index:99999;
}موقعیت (position): یک المان با موقعیت fixed همواره نسبت به صفحه نمایش قرار می گیرد. این یعنی المان در یک مکان ثابت در صفحه نمایش قرار می گیرد، حتی اگر صفحه اسکرول شود.
عرض (width): عرض را 100% قرار دهید تا تمام صفحه را بپوشاند.
ارتفاع (height): ارتفاع را 100vh قرار دهید تا 100% ارتفاع صفحه نمایش را در بر بگیرد.
پس زمینه (background): در اینجا ما از صفاتی (attribute) مثل #fff رنگ سفید (می توانید هر رنگی را انتخاب کنید)، url (لینک فایل gif که تصویر پیش بارگذاری را نمایش می دهد)، no-repeat (جلوگیری از تکرار نمایش تصویر)، center (قرار گرفتن در مرکز صفحه نمایش) استفاده می کنیم.
z-index : z-index ترتیب قرار گرفتن یک المان را نشان می دهد. یک المان با z-index بالاتر همیشه جلوتر و روی یک المان با مقدار کوچک تر قرار می گیرد.
مرحله 3: اکنون یک event بر روی تگ body قرار می دهیم تا یک جاوااسکریپت بلافاصله پس از این که تگ body در صفحه نمایش بارگذاری شد، اجرا شود.
<body onload="load()">
<div id="loading"><div>
</body>اکنون داخل تگ body کد جاوااسکریپت زیر را قرار می دهیم.
<script>
var load = document.getElementById("loading");
function load()
{
load.style.display ='none';
}
</script>اکنون پیش بارگذاری آماده است.
