متغیرهای

ایجاد متغیرهایی برای محتوای صفحه گاهی اوقات می تواند به سادگی افزودن یک افکت پس زمینه به عناصر صفحه موجود باشد. در این مثال، تمام آیتم‌های فهرست دارای ساختار HTML زیرین یکسانی هستند. با این حال، مکان‌ها با پس‌زمینه خاکستری استایل‌بندی شده‌اند که از یک انیمیشن CSS برای ایجاد یک جلوه بارگذاری ضربانی استفاده می‌کند.

بسته به نحوه پیاده‌سازی عناصر صفحه شما، ممکن است لازم باشد CSS خود را کمی تنظیم کنید تا مطمئن شوید که مکان‌ها همچنان فضا را اشغال می‌کنند، حتی اگر حاوی محتوا نباشند. اغلب این به شکل افزودن ویژگی های width یا height به عناصر صفحه موجود است. به عنوان مثال، در این مثال، اضافه کردن height: 1.5em به .text-container تضمین می کند که مکان نگهدار آن قابل مشاهده باقی می ماند، حتی اگر حاوی هیچ متنی نباشد.

<div class="grid">
    <div class="item">
        <div class="image-container">
            <img src="hats.jpg">
        </div>
        <div class="text-container">Hats</div>
    </div>
    <div class="item empty">
        <div class="image-container">
            <img src="">
        </div>
        <div class="text-container">Watches</div>
    </div>
    <div class="item empty">
        <div class="image-container">
            <img src="">
        </div>
        <div class="text-container"></div>
    </div>
    <div class="item empty">
        <div class="image-container">
            <img src="">
        </div>
        <div class="text-container"></div>
    </div>
    <div class="item empty">
        <div class="image-container">
            <img src="">
        </div>
        <div class="text-container"></div>
    </div>
    <div class="item empty">
        <div class="image-container">
            <img src="">
        </div>
        <div class="text-container"></div>
    </div>
</div>

        :root {
    --placeholder-primary: #eeeeee;
    --placeholder-secondary: #cccccc;
}
.grid {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1em;
    width: 100%;
    max-width: 650px;
    margin: 1em 0;
}
.item {
    display: grid;
    gap: .5em;
    width: 200px;
}
.text-container {
    font-size: 1em;
    height: 1.5em;
    text-align: center;
    font-weight: bold;
}
.image-container {
    width: 200px;
    height: 200px;;
    animation: placeholder ease-in-out 2s infinite;
}
.image-container img {
    width: 100%;
}
@keyframes placeholder {
    0% {
        background-color: var(--placeholder-primary);
    }
    50% {
        background-color: var(--placeholder-secondary);
    }
    100% {
        background-color: var(--placeholder-primary);
    }
}
@keyframes fadeIn {
    0% {
        opacity: 0%;
    }
    100% {
        opacity: 100%;
    }
}
.item.loaded .image-container {
    animation: none;
}
.item.loaded .image-container img{
    animation: fadeIn linear .5s;
}
        

        const data = [
    {
        description: "Watches",
        // 
        // src: "https://web-dev.imgix.net/image/j2RDdG43oidUy6AL6LovThjeX9c2/GMPpoERpp9aM5Rihk5F2.jpg"
    },
    {
        description: "Shirt",
        src: "shirt.jpg"
    },
    {
        description: "Shorts",
        src: "shorts.jpg"
    },
    {
        description: "Sunglasses",
        src: "sunglasses.jpg"
    },
    {
        description: "Shoes",
        src: "shoes.jpg"
    }
];
document.querySelectorAll(".item.empty").forEach((el, index) => {
    if (data[index]) {
        el.classList = "item loaded";
        el.querySelector("img").src = data[index].src;
        el.querySelector(".text-container").innerHTML = data[index].description;
    }
});