css 技巧：利用 after 伪对象和 background 属性实现 img 图片标签占位图

同步发布：https://blog.jijian.link/2020-04-15/css-img-after-placeholder/

如图：

图片加载失败了，在浏览器会默认显示一张破图。受各种网速、浏览器等因素影响，我们无法保证图片能够完全加载成功。加载失败时如何更友好的显示是前端要考虑的主要因素。

常见做法都是使用一张默认图代替加载失败的图片，比如一个 logo 、一张主题图片等。

做法一

使用 JS 懒加载图片，如果图片加载失败，使用一个默认图占位。

推荐插件：https://github.com/lzxb/lazy-load-img

该插件使用 setTimeout 监听页面元素是否显示，如果图片出现在显示区域则执行图片加载。适应常见的 tab 切换，轮播图等。

注意：图片懒加载也是一种页面优化手段，该方案适用于一开始项目立项就有考虑懒加载情况。

做法二

使用 img 伪类 after 和 background 实现占位图。

该方案适用于一些未考虑图片懒加载的项目优化。

比如：页面上某个模块存在很古老，如果去改 html 结构有风险，这时候可以使用 css background 和伪类 after 用占位图去优化显示。

注意：该方案仅适用于 webkit 内核浏览器，对于采用渐进增强的网页比较实用。比如： chrome浏览器，移动端浏览器等。桌面浏览器比如 Firefox、IE 等都不支持 img:after 写法。

效果：

https://blog.jijian.link/2020-04-15/css-img-after-placeholder/

源码：

<img class="placeholder" src="./test.png">

<style>
.placeholder {
  width: 120px;
  height: 120px;
  position: relative;
}
.placeholder:after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background: url('img.png') no-repeat center #999;
  z-index: 3;
}
</style>

做法三

直接使用 img background 属性实现占位图。

注意：该方案中的 alt="" 不能少，也不能写入任何文字，如果有文字，会导致文字显示出来，如果没有 alt 属性，会显示破图。

该方案好处是兼容性强，各种浏览器都支持 img background 写法。

效果：

https://blog.jijian.link/2020-04-15/css-img-after-placeholder/

源码：

<img class="placeholder2" src="./test.png" alt="">
<style>
.placeholder2 {
  width: 120px;
  height: 120px;
  background: url('img.png') no-repeat center #999;
}
</style>

 

总结

img 标签经常用于加载图片，background 属性及 after 伪对象使用比较少。其实 css 比我们想象中的更强大。

以上使用 css 优化方案需要考虑 png 透明背景情况，如果 png 透明，可能会导致占位图与需要显示的图片重叠。