如何用css实现图片懒加载占位样式

.image-container {
  width: 300px;
  height: 200px;
  background-color: #f0f0f0;
  background-image: linear-gradient(45deg, #f8f8f8 25%, transparent 25%),
                    linear-gradient(-45deg, #f8f8f8 25%, transparent 25%),
                    linear-gradient(45deg, transparent 75%, #f8f8f8 75%),
                    linear-gradient(-45deg, transparent 75%, #f8f8f8 75%);
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
}

.image-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  animation: loadingShimmer 1.5s infinite;
}
<p>@keyframes loadingShimmer {
to {
left: 100%;
}
}

<div class="image-container">
  <img src="real-image.jpg" alt="示例图片" class="lazy-image" onload="this.parentElement.classList.add('loaded')">
</div>

.lazy-image {
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
<p>.image-container.loaded .lazy-image {
opacity: 1;
}</p><p>.image-container.loaded::before {
display: none;
}

.image-container {
  background-image: url('data:image/jpeg;base64,/9j/4AAQSk...'); /* 小尺寸模糊图 */
  background-size: cover;
}