使用 CSS 显示加载图像
Displaying Loading Image using CSS
我目前有以下 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
,但它不起作用。知道为什么吗?
您可以将微调器设置为图像的背景:
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://picsum.photos/540/304 540w, https://picsum.photos/960/540 960w" sizes="(min-width: 576px) 540px, 100vw" src="https://picsum.photos/300/160">
与其加载较小的图像以显示为 loader,不如简单地旋转一个伪元素。
它的好处是启动速度比图像快得多,并且可以节省额外的服务器调用。
.my-img-container {
position: relative;
padding-top: 50%;
}
.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);
}
}
<div class="my-img-container">
<img src="https://picsum.photos/600/300">
</div>
我目前有以下 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
,但它不起作用。知道为什么吗?
您可以将微调器设置为图像的背景:
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://picsum.photos/540/304 540w, https://picsum.photos/960/540 960w" sizes="(min-width: 576px) 540px, 100vw" src="https://picsum.photos/300/160">
与其加载较小的图像以显示为 loader,不如简单地旋转一个伪元素。
它的好处是启动速度比图像快得多,并且可以节省额外的服务器调用。
.my-img-container {
position: relative;
padding-top: 50%;
}
.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);
}
}
<div class="my-img-container">
<img src="https://picsum.photos/600/300">
</div>