نحوه ایجاد و نمایش اسکلت صفحه یا سایت در زمان لود صفحه
چطور میشه در زمان لود کامل سایت اسکلت صفحه برای مخاطب همانند فیسبوک و ... نمایش داد؟
پاسخ‌ها
5
باید ابتدا وایرفریم قالب رو در بیارید
مثلا به کارت زیر دقت کنید:
وایر فریم خامش شبیه زیر میشه:
<div class="card"></div>بعد میشه از CSS استفاده کرد
/*
* Variables
*/
:root {
--card-padding: 24px;
--card-height: 340px;
--card-skeleton: linear-gradient(lightgrey var(--card-height), transparent 0);
--avatar-size: 32px;
--avatar-position: var(--card-padding) var(--card-padding);
--avatar-skeleton: radial-gradient(circle 16px at center, white 99%, transparent 0
);
--title-height: 32px;
--title-width: 200px;
--title-position: var(--card-padding) 180px;
--title-skeleton: linear-gradient(white var(--title-height), transparent 0);
--desc-line-height: 16px;
--desc-line-skeleton: linear-gradient(white var(--desc-line-height), transparent 0);
--desc-line-1-width:230px;
--desc-line-1-position: var(--card-padding) 242px;
--desc-line-2-width:180px;
--desc-line-2-position: var(--card-padding) 265px;
--footer-height: 40px;
--footer-position: 0 calc(var(--card-height) - var(--footer-height));
--footer-skeleton: linear-gradient(white var(--footer-height), transparent 0);
--blur-width: 200px;
--blur-size: var(--blur-width) calc(var(--card-height) - var(--footer-height));
}
/*
* Card Skeleton for Loading
*/
.card {
width: 280px;
height: var(--card-height);
}
.card:empty::after {
content: "";
display: block;
width: 100%;
height: 100%;
border-radius: 6px;
box-shadow: 0 10px 45px rgba(0, 0, 0, 0.1);
background-image: linear-gradient(90deg, rgba(211, 211, 211, 0) 0, rgba(211, 211, 211, 0.8) 50%, rgba(211, 211, 211, 0) 100%), var(--title-skeleton), var(--desc-line-skeleton), var(--desc-line-skeleton), var(--avatar-skeleton), var(--footer-skeleton), var(--card-skeleton);
background-size: var(--blur-size), var(--title-width) var(--title-height), var(--desc-line-1-width) var(--desc-line-height), var(--desc-line-2-width) var(--desc-line-height), var(--avatar-size) var(--avatar-size), 100% var(--footer-height), 100% 100%;
background-position: -150% 0, var(--title-position), var(--desc-line-1-position), var(--desc-line-2-position), var(--avatar-position), var(--footer-position), 0 0;
background-repeat: no-repeat;
-webkit-animation: loading 1.5s infinite;
animation: loading 1.5s infinite;
}
@-webkit-keyframes loading {
to {
background-position: 350% 0, var(--title-position), var(--desc-line-1-position), var(--desc-line-2-position), var(--avatar-position), var(--footer-position), 0 0;
}
}
@keyframes loading {
to {
background-position: 350% 0, var(--title-position), var(--desc-line-1-position), var(--desc-line-2-position), var(--avatar-position), var(--footer-position), 0 0;
}
}
/*
* Demo Stuff
*/
body {
min-height: 100vh;
background-color: #FFF;
display: flex;
justify-content: center;
align-items: center;
}
در ضمن آدرس Codepen این طرح هم در آدرس زیر موجوده:
https://codepen.io/mxbck/pen/EvmLVp
ببخشید، در این روش، بخشی که نمایش و عدم نمایش در هنگام بارگذاری/پایان بارگذاری رو کنترل می کنه کجاست؟
به چه صورتی این کار رو می کنه؟
یعنی وقتی که کل سایت بارگذاری شدش این تصاویر خام از بین میرن؟ یا اینکه تکه تکه هر کدوم از بخش ها می تونه شروع به نمایش کنند خودشون؟
گفتگوهای مرتبط
شاید پاسخ شما همین‌جا باشد
گام به گام مثال بالا در این نشانی:
https://css-tricks.com/building-skeleton-screens-css-custom-properties/
جناب مهندس، ببینید من درست متوجه استراتژی کلی شدم؟
ابتدا طرح اصلی سایت رو بصورت یک شکل ساده با wireframe در میاریم، بعدش اون رو طراحی می کنیم.
خصوصیت کلیدی در اجرای طراحی ما، background-image هستش. در ضمن انتخابگر کلیدی هم در اینجا :empty هست، که به ما کمک می کنه تا طراحی مون هنگام بارگذاری نمایش داده بشه، وقتی بارگذاری سایت به اتمام رسید، خودبخود این تصاویر خام حذف میشن.
وقتی که بارگذاری تموم بشه میشه راحت این المان رو hidden کرد
@milad
خیر تصویر خود به خود حذف نمیشه. میشه از رویداد Onload در تگ body استفاده کرد و عملیات رو به پایان رسوند
<body onload="hideSkeleton()"> و در این تابع میشه از jquery یا خود جاوااسکریپت استفاده کرد و المان رو مخفی کرد