بخش پیشبارگذاری سایت (Preloader) یکی از ویژگیهای مهم برای بهبود تجربه کاربری (UX) است، مخصوصاً در قالبهای چندمنظوره و سنگین که المانهای بصری زیادی دارند. این بخش معمولاً در پوشه تنظیمات قالب وظیفه مدیریت اولین لایه بصری که کاربر هنگام ورود به سایت میبیند را بر عهده دارد.
راهنمای بخش: سیستم پیشبارگذاری سایت (Preloader Settings)
🔹 عملکرد و هدف این بخش
بخش پیشبارگذاری یا Preloader، یک المان گرافیکی (شامل انیمیشن، لوگو یا آیکون متحرک) است که به محض کلیک کاربر روی آدرس سایت، نمایش داده میشود و تا زمانی که تمام کدهای استاتیک، تصاویر و المانهای اصلی صفحه به طور کامل بارگذاری (Load) نشدهاند، روی صفحه باقی میماند. هدف اصلی این بخش، پنهان کردن فرآیند بارگذاری لایههای پشته سایت و جلوگیری از نمایش بههمریخته یا تکهتکه عناصر به کاربر در ثانیههای اولیه ورود است.
🔹 ساختار فنی و نحوه کارکرد سیستم
کدهای مربوط به این بخش در هسته تنظیمات قالب، به صورت یک لایه بالایی (Overlay) با اولویت نمایش بالا عمل میکنند:
-
شروع فراخوانی (تگ هدر): به محض ارسال درخواست باز شدن صفحه، این لایه با کدهای CSS اختصاصی به صورت تمامصفحه (Full-screen) روی تمام عناصر قرار میگیرد تا کاربر چیزی از پشت صحنه نبیند.
-
بررسی وضعیت بارگذاری (جاوااسکریپت): اسکریپت پیشبارگذار به صورت هوشمند رویداد
window.loadمرورگر را زیر نظر میگیرد. -
حذف انیمیشن: به محض اینکه مرورگر تایید کند تمام کدهای CSS، فونتها و تصاویر اصلی صفحه کاملاً لود شدهاند، این لایه با یک انیمیشن محو شونده (Fade out) ملایم کنار میرود و سایت کامل و بینقص به کاربر نمایش داده میشود.
🔹 گزینهها و نحوه مدیریت این بخش در پنل تنظیمات
در این بخش از تنظیمات قالب، امکانات زیر برای شخصیسازی در اختیار شما قرار دارد:
-
فعال/غیرفعالسازی (Enable/Disable): امکان روشن یا خاموش کردن کل سیستم پیشبارگذار در سراسر سایت.
-
تنظیمات رنگبندی: امکان تغییر رنگ پسزمینه (Background) صفحه پیشبارگذار و رنگ آیکون متحرک متناسب با پالت رنگی اصلی سایت شما.
💡 یک نکته فنی و سئویی مهم: انیمیشنها و کدهای این بخش به صورت کاملاً بهینه و استاتیک طراحی شدهاند تا خودِ فرآیند پیشبارگذاری، بار اضافی به سایت تحمیل نکند و تاثیری منفی روی شاخصهای سرعت گوگل (مثل LCP) نداشته باشد. با این حال، اگر سرعت هاست شما بسیار بالا است و صفحات در کسری از ثانیه لود میشوند، میتوانید برای سریعتر دیده شدن محتوا این بخش را غیرفعال کنید.