基于伪元素的图片内容生成技术

案例背景

Web开发过程中，当遇到页面中具有较多图片的情况时，为了提高页面加载速度和节约带宽，决定将首屏以下的图片通过滚屏事件触发的方式进行异步加载，但是又需要考虑到布局的稳健性和用户体验，此时应该采取何种方式实现？

解决方案

为了使得布局稳健，对于首屏以下的图片来说，首先可以考虑使用一张透明的图片进行占位，如：

<img src="transparent.png">

这样当图片从无到有时，不会发生文本内容“瀑布式下落”的现象。
然而，这个透明的占位图片也是多余的资源，我们可以进一步利用

<img>

然后配合

img {
    width: 231px;      /* 待加载图片的宽度 */
    height: 202px;     /* 待加载图片的高度 */
}

来实现相同的效果。这里的<img>没有设置src属性，而不是src=""。需要注意的是，src=""在很多浏览器下依然会发生请求，而且请求的内容是当前页面，当不设置图片的src属性时，图片不会有任何请求。

但是上面的方法会在Firefox浏览器下出现问题，在Firefox下，对光秃秃的<img>标签设置宽高尺寸没有任何反应，因为在缺少src属性时，Firefox将<img>当成普通的内联元素处理。为此，需要设置：

img {
    display: inline-block;        /* 也可以是block */
    width: 231px;                 /* 待加载图片的宽度 */
    height: 202px;                /* 待加载图片的高度 */
}

此时的页面如下所示：

此时虽然页面布局稳健了，但是当用户向下滚动页面，而碰巧遇到JavaScript脚本加载比较慢的情况时，用户就将看到如上图所示的页面效果；相信此时用户肯定是一脸懵逼的，因为他并不知道空白区域是用来干什么的。

为了加强用户体验，此时需要为图片设置alt属性，以告知用户这里是一张图片，并简要叙述图片的内容，如：

<img alt="这是一道美味的佳肴">

刷新一下页面，在Firefox中的表现如下：

Firefox效果

在Firefox下，页面表现正常，然而到了Chrome下，事情就不对劲了：

Chrome效果

从图中看到，Chrome中在设置alt属性后多出了一张“小图片”，与Firefox下的表现不一致。

另外，即便Chrome表现正常，原本的alt内容排版也显得十分生硬，而且最让人头疼的是，还难以修改其内容的位置，为了想要让显示信息变得更加美观贴近用户一些，我们只得隐藏图片中的所有内容，再另想办法：

img:not([src]) {
    visibility: hidden;
}

为了解决上述问题，我们可以使用伪元素来生成alt属性中的文本信息，不过在对<img>标签使用伪元素时，有两点需要注意：

• IE浏览器下不支持<img>标签使用伪元素
• Firefox下对<img>标签使用:before设置content内容无效

对于第一点，我们只能不考虑IE浏览器，对于第二点，可能是跟Firefox自己占用了:before伪元素的content属性有关：

上图是在没有对<img>设置任何伪元素的情况下，<img>的默认结构。

为此，我们只能使用:after来呈现alt文本（同时修饰一下）：

<img alt="这是一道美味的佳肴">

img {
    display: inline-block;        /* 也可以是block */
    position: relative;
    width: 231px;                 /* 待加载图片的宽度 */
    height: 202px;                /* 待加载图片的高度 */
}

img:not([src]) {
    visibility: hidden;           /* 隐藏alt文本和Chrome中的小图片 */
}

img:after {
    content: attr(alt);
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    visibility: visible;
    color: #fff;
    background-color: rgba(0,0,0,.5);
    text-align: center;
}

此时的页面效果变成了：

这个时候看起来比之前好多了，不过为了进一步加强体验，还可以加入一些简单的交互和动画——默认情况下，图片区域无任何信息，当用户将鼠标移到图片区域时，从图片底部向上呈现出alt文本。为此，我们可以添加：

img {
    overflow: hidden;
    display: inline-block;
    position: relative;
    width: 231px;
    height: 202px;
}

img:after {
    content: attr(alt);
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    visibility: visible;
    color: #fff;
    background-color: rgba(0,0,0,.5);
    text-align: center;
    transform: translateY(100%);
    transition: transform .2s;
}

img:hover:after {
    transform: translateY(0);
}

这里使用transform: translateY(100%)将文本信息向下移动了自身高度尺寸大小的高度，从而使其移出了<img>的内容范围：

同时为其添加transition: transform .2s以增加过渡的动画效果。这样只要用户hover图片区域，文本就会向上移回到原来的位置。最后在<img>中添加overflow: hidden隐藏该文本，这样，页面又回到了最初的效果：

此时我们试着hover图片所在区域，什么？怎么没反应？！原来是因为我们把之前图片的内容区域设置为了visibility: hidden，那这下该怎么办？别着急，我们不是还有:before伪元素吗，虽然我们不能用:before伪元素设置内容，但是我们却可以将其充满整个<img>空间，作为供我们hover的对象（伪元素也算是元素的一部分）：

img:before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    visibility: visible;
}

这里需要设置display:block，因为伪元素默认情况下是内联元素，没办法设置尺寸，只有将其设置为inline-block或block才能设置尺寸。

这时我们在Chrome中hover图片内容区域，发现终于成功了！然后我们又看看在Firefox下的表现：

What?! 怎么Firefox又出问题了？！我明明设置的是:before伪元素visibility: visible，为什么<img>中的alt文本跑出来了？真让人摸不着头脑。。。不过好在还是可以解决的，办法就是在<img>中设置color: transparent：

img {
    overflow: hidden;
    display: inline-block;
    position: relative;
    width: 231px;
    height: 202px;
    color: transparent;
}

刷新一下界面，发现Firefox和Chrome终于表现一样了，且也达到了我们实现的功能。不过最后别忘了通过:before伪元素给图片内容区域加个背景色来“吸引”用户hover该区域，不然我们搞了这么半天不就白忙活了吗。。。

img:before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    visibility: visible;
    background-color: lightgreen;
}

最后来试试效果，当用户向下滚动屏幕首先看到的应该是这样的页面：

当用户用鼠标hover绿色区域后，得到这样的页面：

大功告成！最后所有的代码如下所示：

<img alt="这是一道美味的佳肴">

img {
    overflow: hidden;
    display: inline-block;
    position: relative;
    width: 231px;
    height: 202px;
    color: transparent;           /* 隐藏Firefox alt文字 */
}

img:not([src]) {
    visibility: hidden;           /* 隐藏alt文本和Chrome中的小图片 */

img:before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    visibility: visible;
    background-color: lightgreen;
}

img:after {
    content: attr(alt);
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    visibility: visible;
    color: #fff;
    background-color: rgba(0,0,0,.5);
    text-align: center;
    transform: translateY(100%);
    transition: transform .2s;
}

img:hover:after {
    transform: translateY(0);
}

网页示例请参考：演示示例.

虽然页面上的占位图片已经修饰完成，但是该技术最有意思的部分在于：只要JavaScript脚本为<img>标签添加上src属性后，原本<img>设置的:before和:after伪元素将全部失效，取而代之的是加载完成的图片信息（不信可以自己在<img>上手动添加src属性），真可谓是“无缝对接”，十分奇妙！

总结

通过这个示例，我们见识到了基于伪元素的图片内容生成技术的威力，原来只要掌握好一些基础知识和特性，就能实现一些意想不到的效果。同时我们在实现过程中，也看到了浏览器之间对于某些实现细节上的差异表现，即兼容性问题，面对这样的问题我们只有不断积累，不断思考和不断尝试才能做到从容应对。此外，虽然最终这一体验增强实现非常巧妙地利用了各种特性表现，并且在HTML层面没有任何其它代码或内容的辅助，可以说是非常高性价比的技术实现；但是我们也应该清楚地意识到，这样做会使得网页对JavaScript脚本产生巨大的依赖——即无法做到平稳退化；一旦JavaScript脚本被禁用，我们的网页上最终只能是一个又一个的占位标签。因此，在使用这个技术的时候，我们不光要看到它的优势，还应该充分地权衡利弊，想清楚到底是否值得为了提高加载速度来冒着页面无法平稳退化的风险。只有这样，我们才能做到避免对技术的滥用。