آموزش ساخت اسکلتون اسکرین (Skeleton Screen) برای لودینگ ظریف محتوا

🚀 نقشه راه: ساخت اسکلتون اسکرین در یک نگاه

با این چهار قدم ساده، لودینگ پروژه‌ت رو جذاب‌تر و حرفه‌ای‌تر کن!

<!-- محتوای واقعی (مخفی تا زمان لود کامل) -->
<div class="content-wrapper" id="actual-content" style="display: none;">
    <div class="card">
        <img src="product-image.jpg" alt="نام محصول" class="card-image">
        <h2 class="card-title">نام محصول شگفت‌انگیز</h2>
        <p class="card-description">این یک توضیحات کامل برای محصول است که جزئیات و ویژگی‌های آن را بیان می‌کند.</p>
        <button class="card-button">خرید</button>
    </div>
</div>

<!-- اسکلتون اسکرین (نمایش تا زمان لود محتوا) -->
<div class="skeleton-wrapper" id="skeleton-content">
    <div class="card-skeleton">
        <div class="skeleton-image"></div>
        <div class="skeleton-title"></div>
        <div class="skeleton-description"></div>
        <div class="skeleton-button"></div>
    </div>
    <!-- می‌تونی چندتا کارت اسکلتون دیگه هم اینجا اضافه کنی -->
    <div class="card-skeleton">
        <div class="skeleton-image"></div>
        <div class="skeleton-title"></div>
        <div class="skeleton-description"></div>
        <div class="skeleton-button"></div>
    </div>
</div>

<script>
function copyCode(buttonElement) {
    const codeBlock = buttonElement.nextElementSibling;
    const range = document.createRange();
    range.selectNode(codeBlock);
    window.getSelection().removeAllRanges();
    window.getSelection().addRange(range);
    try {
        document.execCommand('copy');
        buttonElement.textContent = '✅ کپی شد!';
        setTimeout(() => {
            buttonElement.textContent = '🔗 کپی کد';
        }, 2000);
    } catch (err) {
        console.error('Failed to copy code: ', err);
        buttonElement.textContent = '❌ خطا در کپی!';
    }
    window.getSelection().removeAllRanges();
}
</script>

.content-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
}

.card {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    width: 300px;
    padding: 20px;
    text-align: center;
    border: 1px solid #eee;
}

.card-image {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-radius: 6px;
    margin-bottom: 15px;
    background-color: #e0e0e0; /* Fallback for image loading */
}

.card-title {
    font-size: 1.6em;
    color: #333;
    margin-bottom: 10px;
}

.card-description {
    font-size: 0.95em;
    color: #666;
    line-height: 1.6;
    margin-bottom: 20px;
}

.card-button {
    background-color: #3498db;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1em;
    transition: background-color 0.3s ease;
}

.card-button:hover {
    background-color: #2980b9;
}


/* Skeleton Screen Styles */
.skeleton-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
}

.card-skeleton {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    width: 300px;
    padding: 20px;
    border: 1px solid #eee;
    animation: pulse 1.5s infinite ease-in-out; /* Add animation */
    -webkit-animation: pulse 1.5s infinite ease-in-out; /* For Safari/Chrome */
}

.skeleton-image,
.skeleton-title,
.skeleton-description,
.skeleton-button {
    background-color: #e0e0e0; /* Gray base color */
    border-radius: 4px;
    margin-bottom: 10px;
}

.skeleton-image {
    width: 100%;
    height: 180px;
}

.skeleton-title {
    width: 80%;
    height: 25px;
}

.skeleton-description {
    width: 95%;
    height: 18px;
}
.skeleton-description:nth-child(4) { /* A second line for description */
    width: 70%;
}
.skeleton-button {
    width: 100px;
    height: 40px;
    margin-top: 15px;
    margin-bottom: 0; /* Override default margin */
}

/* Pulse Animation */
@keyframes pulse {
    0% {
        background-color: #e0e0e0;
    }
    50% {
        background-color: #f0f0f0;
    }
    100% {
        background-color: #e0e0e0;
    }
}

@-webkit-keyframes pulse { /* For Safari/Chrome */
    0% {
        background-color: #e0e0e0;
    }
    50% {
        background-color: #f0f0f0;
    }
    100% {
        background-color: #e0e0e0;
    }
}

/* Media Queries for Responsiveness */
@media (max-width: 768px) {
    .card, .card-skeleton {
        width: 90%; /* Make cards wider on smaller screens */
    }
}

// شبیه‌سازی لود شدن داده از سرور
function fetchData() {
    return new Promise(resolve => {
        setTimeout(() => {
            // فرض می‌کنیم داده‌ها اینجا لود شدن
            const data = [
                { id: 1, title: "تیتر محصول یک", description: "توضیحات جذاب محصول شماره یک.", imageUrl: "https://via.placeholder.com/300x180/FF5733/FFFFFF?text=Product+1" },
                { id: 2, title: "کالای دیجیتال دو", description: "ویژگی‌های بی‌نظیر کالای دوم و کاربرد‌های آن.", imageUrl: "https://via.placeholder.com/300x180/33FF57/FFFFFF?text=Product+2" }
            ];
            resolve(data);
        }, 3000); // شبیه‌سازی 3 ثانیه تاخیر در لودینگ
    });
}

function renderContent(data) {
    const actualContentDiv = document.getElementById('actual-content');
    actualContentDiv.innerHTML = ''; // پاک کردن محتوای قبلی در صورت وجود

    data.forEach(item => {
        const cardDiv = document.createElement('div');
        cardDiv.className = 'card';
        cardDiv.innerHTML = `
            <img src="${item.imageUrl}" alt="${item.title}" class="card-image">
            <h2 class="card-title">${item.title}</h2>
            <p class="card-description">${item.description}</p>
            <button class="card-button">مشاهده محصول</button>
        `;
        actualContentDiv.appendChild(cardDiv);
    });

    document.getElementById('skeleton-content').style.display = 'none'; // مخفی کردن اسکلتون
    actualContentDiv.style.display = 'flex'; // نمایش محتوای واقعی
}

// اجرای فرایند لودینگ
document.addEventListener('DOMContentLoaded', () => {
    fetchData().then(data => {
        renderContent(data);
    });
});

⚠️ مشکلات رایج و راه‌حل‌ها

• مشکل: اسکلتون ناپدید میشه و محتوای واقعی فلیکر (Flicker) می‌کنه.

  راه‌حل: این مشکل معمولاً وقتی پیش میاد که لودینگ خیلی سریع انجام میشه. برای لودینگ‌های کمتر از ۳۰۰ میلی‌ثانیه، بهتره اصلاً اسکلتون اسکرین رو نشون ندی و مستقیم محتوا رو نمایش بدی. می‌تونی از یه `minimum-display-time` با جاوااسکریپت استفاده کنی تا مطمئن بشی اسکلتون حداقل برای یه مدت مشخص (مثلاً ۵۰۰ میلی‌ثانیه) نمایش داده میشه.

• مشکل: انیمیشن اسکلتون روان نیست یا لگ داره.

  راه‌حل: مطمئن شو که از ویژگی‌های CSS که به GPU کمک می‌کنن (مثل `transform: translateZ(0);` یا `will-change: background-color, transform;`) استفاده می‌کنی. انیمیشن‌هایی مثل `background-color` ممکنه روی CPU پردازش بشن و باعث لگ بشن. سعی کن از `keyframes` برای `opacity` یا `transform` استفاده کنی که بهینه تر هستن.

• مشکل: اسکلتون اسکرین روی دستگاه‌های مختلف، ظاهر متفاوتی داره یا واکنش‌گرا نیست.

  راه‌حل: همیشه از واحدهای نسبی مثل `width: 100%`, `height: auto`, `padding: 2%` و `em`/`rem` برای اندازه‌ها استفاده کن. حتماً از Media Queries برای تنظیمات خاص موبایل و تبلت استفاده کن. می‌تونی از فریمورک‌های CSS مثل Bootstrap یا Tailwind CSS هم کمک بگیری که خودشون اصول واکنش‌گرایی رو دارن.

• مشکل: محتوای واقعی بارگذاری شده، اما اسکلتون پنهان نمیشه.

  راه‌حل: این مشکل معمولاً به خاطر خطای جاوااسکریپت یا عدم دسترسی به المان‌هاست. مطمئن شو که `id`های `actual-content` و `skeleton-content` رو درست تو HTML و JavaScriptت گذاشتی. همچنین، بررسی کن که تابع `renderContent` بعد از اتمام لودینگ داده‌ها، حتماً فراخوانی میشه و کد `document.getElementById(‘skeleton-content’).style.display = ‘none’;` اجرا میشه. Console مرورگرت رو چک کن که اروری نباشه.

• مشکل: اسکلتون اسکرین برای Screen Readerها قابل تشخیص نیست.

  راه‌حل: برای بهبود دسترسی‌پذیری، می‌تونی ویژگی `aria-hidden=”true”` رو به اسکلتون اسکرین اضافه کنی تا برای Screen Readerها پنهان بشه، و یه پیام `aria-label=”Loading content”` روی یه المان مخفی نگه دار که وضعیت رو به کاربر اطلاع بده. مثلاً: `

  Loading content…

  `

❓ سوالات متداول (FAQ Schema)