占位符

为网页内容创建占位符有时可能就像向现有页面元素添加背景效果一样简单。在此示例中，所有列表项共享相同的底层 HTML 结构。不过，占位符采用了灰色背景的样式，该背景使用 CSS 动画来产生脉冲加载效果。

根据您的页面元素的实现方式，您可能还需要略微调整 CSS，以确保占位符即使不包含内容，仍然会占用空间。通常采用将 width 或 height 属性添加到现有页面元素的形式。例如，在此示例中，将 height: 1.5em 添加到 .text-container 可确保其占位符保持可见，即使其中不包含任何文本也是如此。

HTML

<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>

CSS

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

JS

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