Создание заполнителей для содержимого страницы иногда может быть таким же простым, как добавление фонового эффекта к существующим элементам страницы. В этом примере все элементы списка имеют одну и ту же базовую структуру 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;
}
});