1masoud
5 سال پیش توسط 1masoud مطرح شد
14 پاسخ

ساخت preload صفحه

@ali.bayat
preloadصفحه چیه و چطوری میشه ساخت


ثبت پرسش جدید
mkt
@mkt 5 سال پیش مطرح شد
حسام موسوی
تخصص : طراح و برنامه نویس
@hesammousavi 5 سال پیش مطرح شد
0

@masoudproton
با سرچ ساخته میشه :| ! قبلش یه سرچ کنید دیگه !


میلاد-م
تخصص : توسعه‌دهنده رابط کاربری - Fron...
@milad 5 سال پیش مطرح شد
0

@kazemimorteza68
منم یک سوالی داشتم درین باره، اینکه این تاخیر رو خودمون یک عددی بهش می دیم؟ مثلا همیشه سه ثانیه طول میکشه.
یا اینکه خودش تا وقتی که اطلاعات صفحه و عکس ها همشون برای کاربر آماده بشه طول میکشه.

توی مثالی که قرار دادید، یک عدد داده. ولی خب میخواستم ببینم در عمل حالت دوم رو چجوری ایجاد می کنند؟


حسام موسوی
تخصص : طراح و برنامه نویس
@hesammousavi 5 سال پیش مطرح شد
3

@milad
خیر شما در ابتدا میتونید یک loading با css درست کنید که کل صفحه رو بگیره و به شکل preload باشه !
ولی میپرسید کی باید متوقف و محو بشه ؟
اینجاست که باید از eventای با عنوان DOMContentLoaded مثلا استفاده کنید البته event های دیگه هم هست این event زمانی رخ میده که صفحه به شکل کامل لود شده باشه بعد از لود شدن کامل صفحه هم میتونید preload که با css و html زدید رو غیرفعال و به اصطلاح محو کنید

window.addEventListener('DOMContentLoaded', (event) => {
    console.log('DOM fully loaded and parsed');
});

رایموند
تخصص : مختصص وردپرس - برنامه نویس لار...
@Raymond 5 سال پیش مطرح شد
میلاد-م
تخصص : توسعه‌دهنده رابط کاربری - Fron...
@milad 5 سال پیش آپدیت شد
1

@hesammousavi
یعنی ابتدا باید درون رویداد load یک loading برای کل صفحه درست کنیم.
سپس از طریق رویداد DOMContentLoaded، اون رو محو کنیم، درست میگم؟


window.addEventListener('load', (event) => {
    // ایجاد نمایشگر انتظار در زمان بارگذاری صفحه
});

window.addEventListener('DOMContentLoaded', (event) => {
      // غیرفعال کردن نمایشگر انتظار
     // نمایش صفحه اصلی
});

1masoud
تخصص : php,laravel
@masoudproton 5 سال پیش آپدیت شد
1

@kazemimorteza68 @endworld

@ali.bayat
الان این عکس برای یوتیوب اینو میشه بگید چطوری میشه
m'lady


میلاد-م
تخصص : توسعه‌دهنده رابط کاربری - Fron...
@milad 5 سال پیش مطرح شد
0

@masoudproton
راه حلش رو پیدا کردی؟

من متوجه شدم.
ببین اساس کارش اینه که: در زمان بارگذاری اولیه، باید بیای و یک لایه ی رویی ایجاد کنی (z-index: 999)، به کمک css، تا سریع خروجی اولیه برای کاربر به نمایش دربیادش.

در همین زمان، محتوای اصلی سایت، در حال دریافت هستش و داره عکس ها و اطلاعات رو از سرور میگیره و توی لایه ی زیری در حال قرار دادن هستش.
زمانی که همه ی اطلاعات رو برای لایه ی زیری دریافت کردش، این لایه ی رویی رو از بین می بری و صفحه اصلی رو به کاربر نشون میدی.


میلاد-م
تخصص : توسعه‌دهنده رابط کاربری - Fron...
@milad 5 سال پیش مطرح شد
0

ببین، در واقع باید دو مرتبه سایت رو طراحی کرد. یک مرتبه یک لایه ی خیلی ساده می سازی. یک مرتبه هم لایه ی اصلی رو می سازی.

این رو ببین:
https://medium.com/@kingrayhan/create-a-simple-preloader-with-jquery-c6efb03c7f23

توی این مثال، لایه ی رویی که بهت گفتم، همون دایره ی انتظار (loader) هستش.
کافیه بجای اینکه این دایره ی انتظار رو طراحی کنی، ساختاری شبیه به عکسی که گذاشتی رو طراحی کنی.


میلاد-م
تخصص : توسعه‌دهنده رابط کاربری - Fron...
@milad 5 سال پیش مطرح شد
0

اینجا واسه دایره های انتظار چیزای خوبی داره، رنگ بندی شون هم میشه کرد:
https://icons8.com/preloaders/


میلاد-م
تخصص : توسعه‌دهنده رابط کاربری - Fron...
@milad 5 سال پیش آپدیت شد
0

با سلام، دوستان کدی که بالا نوشتم درست نیست. منظورم این کد هستش:

window.addEventListener('load', (event) => {
    // ایجاد نمایشگر انتظار در زمان بارگذاری صفحه
});

window.addEventListener('DOMContentLoaded', (event) => {
      // غیرفعال کردن نمایشگر انتظار
     // نمایش صفحه اصلی
});

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


میلاد-م
تخصص : توسعه‌دهنده رابط کاربری - Fron...
@milad 5 سال پیش آپدیت شد
0

رویداد DOMContentLoaded: این رویداد بعد از بارگذاری ساختار DOM رخ می‌دهد. یعنی نیازی به بارگذاری منابع خارجی مانند تصاویر، فایل‌های CSS، فایل‌های جاوا اسکریپت و … نیست و به محض بارگذاری ساختار DOM (یا همان سند HTML) رویداد DOMContentLoaded رخ می‌دهد. به همین دلیل معمولاً Event Handler های عناصر DOM را پس از وقوع این رویداد تعریف می‌کنیم.

رویداد load: این رویداد پس از بارگذاری تمام محتوای صفحه رخ می‌دهد.

رویداد beforeunload: این رویداد قبل از بسته شدن یک پنجره رخ می‌دهد. از این رویداد معمولاً برای جلوگیری از بسته شدن پنجره‌هایی استفاده می‌شود که با بسته شدن آنها ممکن است اطلاعات مهمی از دست برود.

https://www.kirupa.com/html5/running_your_code_at_the_right_time.htm


میلاد-م
تخصص : توسعه‌دهنده رابط کاربری - Fron...
@milad 5 سال پیش مطرح شد
0

نمودار ترتیب رویدادها:
نمودار رویدادها


میلاد-م
تخصص : توسعه‌دهنده رابط کاربری - Fron...
@milad 5 سال پیش آپدیت شد
0

الان با این تفاسیر به نظرم بهتره که اینجوری کدها رو بنویسیم:

document.addEventListener('DOMContentLoaded', (event) => {
    // ایجاد نمایشگر انتظار پس از ایجاد ساختار اولیه سند
});

window.addEventListener('load', (event) => {
      // غیرفعال کردن نمایشگر انتظار، پس از بارگذاری کامل صفحه شامل عکس ها و فایل های خارجی
     // نمایش صفحه اصلی
});

لطفا اگر کسی نظری داشت راجع به نتیجه گیری من، بگه. ممنون میشم


برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام