使用缺省 src 的<img>元素实现滚屏加载效果，但是，就有可能存在这样一个体验问题：如果我们的 JavaScript 加载比较慢，我们的页面就很有可能出现一块一块白色的图片区域，纯白色的，没有任何信息，用户完全不知道这里的内容是什么。

    虽然 alt 属性可以提供描述信息，但由于视觉效果不好，被隐藏掉了。我们可以在图片还没加载时就把 alt 信息呈现出来：

 1 <!DOCTYPE html> 2 <html lang="en"> 3  4     <head> 5         <meta charset="UTF-8"> 6         <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7         <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8         <title>CSS世界--代码实践--图片alt信息呈现</title> 9         <style>10             /* 滚屏加载效果CSS */11             /* img {12                 visibility: hidden;13             }14 15             img[src] {16                 visibility: visible;17             } */18 19             img {20                 display: inline-block;21                 width: 180px;22                 height: 100px;23                 /* 隐藏Firefox alt文字 */24                 color: transparent;25                 position: relative;26                 overflow: hidden;27             }28 29             img:not([src]) {30                 /* 隐藏Chrome alt文字以及银色边框 */31                 visibility: hidden;32             }33 34             img::before {35                 /* 淡蓝色占位背景 */36                 content: "";37                 position: absolute;38                 left: 0;39                 width: 100%;40                 height: 100%;41                 background-color: #f0f3f9;42                 visibility: visible;43             }44 45             img::after {46                 /* 黑色alt信息条 */47                 content: attr(alt);48                 position: absolute;49                 left: 0;50                 bottom: 0;51                 width: 100%;52                 line-height: 30px;53                 background-color: rgba(0, 0, 0, .5);54                 color: white;55                 font-size: 14px;56                 transform: translateY(100%);57                 /* 来点过渡动画效果 */58                 transition: transform .2s;59                 visibility: visible;60             }61 62 63             img:hover::after {64                 transform: translateY(0);65             }66 67         </style>68     </head>69 70     <body>71         <div style="width: 200px;height: 200px;background: blanchedalmond;overflow: auto;">72             <!-- 滚屏加载效果HTML: -->73             <!-- <img> -->74             <img alt="图1" src="https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3791918726,2864900975&fm=26&gp=0.jpg">75             <img alt="美女沉思图" data-src="1.jpg">76             <img alt="图3" src="https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2853553659,1775735885&fm=26&gp=0.jpg">77             <img alt="沉思图" data-src="1.jpg">78         </div>79     </body>80     <script>81 82     </script>83 84 </html>

运行效果：

 CSS世界--代码实践--图片alt信息呈现_CSS