با سلام و وقت بخیر به دوستان عزیز بنده دو سوال در باره ی رندر صفحات دارم
rahdigital.ir
1- لطفا به این سایت نگاه کنید البته من لینک نکردم !
سرعت لود خیلی خوبی داره و تازه من متوجه شدم که هر وقت کاربر اسکرول میکنه پایین قسمت های دیگه ی سایت تازه لود میشه و اینطوری نیست که یکباره همشون لود بشن این موضوع کمک میکنه که صفحات و موارد اولیه تا کسری از ثانیه ی اول تو سایت نمایش داده بشن
لطفا اگر اطلاعی دارین اسم این روش رو بگین
2- دومین مورد من برای سایتم با چند خط کد جاوا یک پریلودر طراحی کردم طوری که وقتی تا صفحه کامل لود نشه نمایش نده ولی فکر میکنم اصلا کاربردی نیست و مثلا به سرعت لود تمام صفحات سایتم 2 یا 3 ثانیه بیشتر اضافه کرده در صورتی که من میخواستم اگر زمان لود بیشتر بود این پریلود کار کنه نه برای تمام صفحات ایا موردی هست و یا فانکشنی خود وردپرس داشته باشه
این هم کد جاوااسکریپتش
ممنون بابت راهنمایی
<script>
const preloader = document.querySelector(".preloader");
const preloaderDuration = 1500;
const hidePreloader = () => {
setTimeout(() => {
preloader.classList.add("hide");
}, preloaderDuration);
}
window.addEventListener("load", hidePreloader);
</script>
سلام وقت بخیر 👋
یک چیزی داریم به نام Lazyload یا به ترجمه غلط فارسی بارگذاری تنبل که در وردپرس بیشتر اسمش شنیده میشه ، این دقیقا میاد همین کار رو میکنه در مرحله اول صفحه بدون تصاویر لود میشه و بعد از اون تصاویر اضافه میشن ، کار خاصی انجام نمیده فقط با جاوا اسکریپت تصاویر رو بعد از لود اضافه میکنه.
مورد دوم هم کلا اشتباهه ، ما نمیام زمان به لود سایت اضافه کنیم که ، الان شما 1.5 ثانیه سرعت سایت رو کم کردی :/
کد بهینه:
const preloader = document.querySelector(".preloader");
const hidePreloader = () => {
preloader.classList.add("hide");
}
window.addEventListener("load", hidePreloader);
البته پیشنهاد میکنم هایدش نکنی کلا ریمووش کنی :
preloader.remove();
موفق باشی 🌹
ممنون جناب امیری نسب بابت تجربه ی خوبتون 🌹
ممکنه ازتون خواهش کنه همین مورد پیشنهادیتون رو کامل تو خود کد بهینه بفرستین
preloader.remove();
خواهش میکنم ، بله حتما 🌹
const preloader = document.querySelector(".preloader");
const hidePreloader = () => {
preloader.remove();
}
window.addEventListener("load", hidePreloader);
البته می تونید همین تابع رو در خود EventListener قرار بدید.
const preloader = document.querySelector(".preloader");
window.addEventListener("load", () => {
preloader.remove();
});
در این مخزن گیت هاب هم سورس های زیادی قرار دادم که یکیش پیاده سازی همین Preloader هست که می تونید از این لینک فایل هاش رو بررسی کنید.
چطوری حجم فونتشو انقد کم کرده سایت من وردپرسیه و کد بلد نیستم
https://gtmetrix.com/reports/fonixfa.ir/WQWy14Sh/#
https://gtmetrix.com/reports/rahdigital.ir/MfrSH6Z6/
fonixfa.ir
آیا مایل به ارسال نوتیفیکیشن و اخبار از طرف راکت هستید ؟