प्लेसहोल्डर

पेज के कॉन्टेंट के लिए प्लेसहोल्डर बनाना, कभी-कभी उतना ही आसान हो सकता है जितना कि मौजूदा पेज के एलिमेंट में बैकग्राउंड इफ़ेक्ट जोड़ना. इस उदाहरण में, सूची में मौजूद सभी आइटम का एचटीएमएल स्ट्रक्चर एक जैसा है. हालांकि, प्लेसहोल्डर की स्टाइल स्लेटी रंग के बैकग्राउंड में होती है. यह सीएसएस ऐनिमेशन का इस्तेमाल करके, पल्सिंग लोडिंग इफ़ेक्ट को तैयार करता है.

आपके पेज एलिमेंट कैसे लागू किए जाते हैं, इसके आधार पर आपको अपने सीएसएस में थोड़ा बदलाव करना पड़ सकता है, ताकि यह पक्का किया जा सके कि प्लेसहोल्डर अब भी जगह ले रहे हैं, भले ही उनमें कोई कॉन्टेंट न हो. अक्सर ऐसा मौजूदा पेज एलिमेंट में 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;
    }
});