css实用技巧——异步加载图片时 在图片完成加载前 鼠标悬浮到占位图片上时显示图片

完整范例代码

<template><div style="padding: 20px"><img alt="我是一张苹果的照片"></div></template><style scoped>img {display: inline-block;width: 200px;height: 100px;/* 隐藏Firefox alt文字 */color: transparent;position: relative;overflow: hidden;}img:not([src]) {/* 隐藏Chrome alt文字以及银色边框 */visibility: hidden;}img::before {/* 淡蓝色占位背景 */content: "";position: absolute;left: 0;width: 100%;height: 100%;background-color: #f0f3f9;visibility: visible;}img::after {/* 黑色alt信息条 */content: attr(alt);position: absolute;left: 0;bottom: 0;width: 100%;line-height: 30px;background-color: rgba(0, 0, 0, .5);color: white;font-size: 14px;text-align: center;transform: translateY(100%);/* 来点过渡动画效果 */transition: transform .2s;visibility: visible;}img:hover::after {transform: translateY(0);}</style>

实现原理

图片异步加载完成前，img标签还没有src属性，此时img标签只是一个普通的内联元素，::before和::after可以生效通过 attr(alt) 可以获取到图片中的alt属性值当图片异步加载完成后，img标签便拥有了src属性，则此时的img标签从普通元素变成了替换元素，::before和::after不再生效，鼠标悬浮到图片上时，将不再显示alt信息

css实用技巧——异步加载图片时 在图片完成加载前 鼠标悬浮到占位图片上时显示图片的alt信息