Question

我目前有以下CSS代码，我应用于显示响应式图像的div元素。

.my-img-container {
  position: relative;
  &:before {
    display: block;
    content: " ";
    background: url("https://lorempixel.com/300/160/") no-repeat;
    background-size: 100% 100%;
    width: 100% !important;
    padding-top: 56.25%;
  }
  >img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100% !important;
    height: 100% !important;
  }
}

<div class="my-img-container">
  <img srcset="https://lorempixel.com/540/304 540w, https://lorempixel.com/960/540 960w" sizes="(min-width: 576px) 540px, 100vw" src="https://lorempixel.com/300/160">
</div>

我要做的是在响应图像加载时在后台显示图像，因此CSS中的content，但它不起作用。知道为什么吗？

Answer 1

不是加载较小的图像以显示为加载器，而是简单地旋转伪元素。

它的优点是能够以比图像更快的速度启动并节省额外的服务器调用。

＆＃13;

.my-img-container {
  position: relative;
  padding-top: 56.25%;
}
.my-img-container:before {
  content: " ";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80px;
  height: 80px;
  border: 2px solid red;
  border-color: transparent red transparent red;
  border-radius: 50%;
  animation: loader 1s linear infinite;
}
.my-img-container > img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100% !important;
  height: 100% !important;
}
@keyframes loader {
  0% {
    transform: translate(-50%,-50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%,-50%) rotate(360deg);
  }
}

＆＃13;

<div class="my-img-container">
  <img srcset="https://lorempixel.com/540/304 540w, https://lorempixel.com/960/540 960w" sizes="(min-width: 576px) 540px, 100vw" src="https://lorempixel.com/300/160">
</div>

＆＃13;

Answer 2

您可以将微调器设置为图像的背景：

html,
body {
  height: 100%;
  margin: 0;
}

img {
  display: block;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: url(https://upload.wikimedia.org/wikipedia/commons/b/b1/Loading_icon.gif) no-repeat center;
}

<img srcset="https://lorempixel.com/540/304 540w, https://lorempixel.com/960/540 960w" sizes="(min-width: 576px) 540px, 100vw" src="https://lorempixel.com/300/160">

使用CSS显示加载图像

2 个答案: