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等网站性能工具来检查图片是否正确地设置了尺寸与格式，并确保网络资源的正常传输。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！