css定义未加载的图片

在网页设计中，我们经常会遇到一种情况，就是图片未加载出来，给用户带来不好的体验。这时候，我们可以使用CSS来定义未加载的图片。

img {
  width: 100px;
  height: auto;
  object-fit: cover;
  background-color: #ddd;
}

img:not([src]) {
  background-image: url('loading.gif');
  background-size: 50px 50px;
  background-position: center;
  background-repeat: no-repeat;
}

上面的代码中，我们先定义了图片的样式，包括宽高、剪裁方式、背景颜色等等。然后，我们使用CSS选择器，选择所有没有指定src属性的图片，并为它们添加背景图、背景大小、背景位置和背景重复属性。这样就能够在图片未加载出来时，显示一张loading动画，给用户一个友好的提示。

如果你的网站需要大量图片展示，可以使用Lighthouse等网站性能工具来检查图片是否正确地设置了尺寸与格式，并确保网络资源的正常传输。