স্থানধারক

পৃষ্ঠার সামগ্রীর জন্য স্থানধারক তৈরি করা কখনও কখনও বিদ্যমান পৃষ্ঠা উপাদানগুলিতে একটি পটভূমি প্রভাব যুক্ত করার মতো সহজ হতে পারে। এই উদাহরণে, সমস্ত তালিকা আইটেম একই অন্তর্নিহিত HTML কাঠামো ভাগ করে। যাইহোক, স্থানধারক একটি ধূসর পটভূমিতে স্টাইল করা হয় যা একটি স্পন্দিত লোডিং প্রভাব তৈরি করতে একটি CSS অ্যানিমেশন ব্যবহার করে।

আপনার পৃষ্ঠার উপাদানগুলি কীভাবে প্রয়োগ করা হয় তার উপর নির্ভর করে, আপনাকে আপনার CSS সামান্য সামঞ্জস্য করতে হতে পারে তা নিশ্চিত করতে যে স্থানধারকগুলি এখনও স্থান নেয় যদিও তাদের মধ্যে সামগ্রী নেই। প্রায়শই এটি বিদ্যমান পৃষ্ঠা উপাদানগুলিতে width বা height বৈশিষ্ট্য যোগ করার রূপ নেয়। উদাহরণস্বরূপ, এই উদাহরণে, .text-container এ height: 1.5em যোগ করা নিশ্চিত করে যে এর স্থানধারকটি দৃশ্যমান থাকে যদিও এতে কোনো পাঠ্য থাকে না।

<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;
    }
});