场景:
利用alt实现图片加载时显示图片加载效果
代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>demo</title>
<style>
/* img是替换元素,它的内容外观不受css影响 */
img {
position: relative;
visibility: hidden;
/* 当src缺省时,img就不是替换元素了,是一个普通的内联元素,表现为inline */
width: 200px;
height: 200px;
display: inline-block;
/* 这里设置宽高会影响图片尺寸是因为图片中的content替换内容默认是fill */
object-fit: fill;
/* 火狐 visibility: hidden时还是会显示alt文字内容,需要隐藏文字*/
text-indent: -999px;
}
img[src] {
/* 图片元素本先隐藏,当src图片请求回来时再显示 */
visibility: visible;
}
img::before {
content: '';
visibility: visible;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: rgba(166, 164, 164, 0.1);
}
img::after {
visibility: visible;
content: attr(alt);
/* 将这块的文字内容显示正常 */
text-indent: 0;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
text-align: center;
color: #fff;
padding: 4px 0;
background-color: rgb(147, 146, 146);
z-index: 999;
}
</style>
</head>
<body>
<!-- src属性缺省时,图片不会进行任何请求,如果是src=""依旧会发起请求,请求的是当前页面数据 -->
<img id="img" alt="加载中...">
</body>
<script>
setTimeout(function() {
document.getElementById('img').alt = '图片信息'
document.getElementById('img').src = '../img.png'
},1000)
</script>
</html>
效果图: