- A+
所属分类：Web前端
使用缺省 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>
运行效果：
