样式化加载失败的图片

本片文章翻译自 Styling Broken Images 翻译过程中可能会在原意不变的基础上有些细微改动,望读者见谅

加载失败的图片是比较丑陋的,比如
我很丑陋,不是吗?

但是我们可以让结果变得更美好。通过给元素设置CSS相关属性可以实现更美的呈现。

IMG元素你需要知道的两点知识

  1. 我们可以针对IMG元素设置排版相关的CSS样式(诸如font等属性)。一旦IMG的可替换文本(即alt属性)出现,则设置的CSS样式应用于这些文本;
  2. IMG元素属于可替换元素(可替换元素是指元素的外观和大小受外部源所影响,常见的可替换元素如IMG,OBJECT,INPUT,TEXTAREA等)。正由于可替换元素收外部源的影响,因此CSS中的伪元素::before、::after对它不起作用。但是,一旦图片加载失败,伪元素就可作用于图片之上

理解了上述两点,我们就可以用CSS实现一个特殊的功能:

当图片正常加载时无需处理,而当加载失败时让图片应用一些特殊的样式,以达到更好的用户体验效果。

实践

采用如下的实例代码:

休要胡说

添加CSS样式

一旦图片加载失败,我们需要向用户提供相关文案,这就用到了CSS的attr函数

实例结果1

示例代码:

替换alt文本

为了让加载失败的图片呈现更为美观,采用伪元素来进行绝对定位,更自由的控制表现。

结果2

添加额外的样式

利用伪元素可以添加更多的额外样式:
111

正如第二节所说,如果图片正常加载,那么伪元素中设置的所有样式都不会被作用,因此这种方式作为一种backup,是非常有效的。

兼容性

不幸的是不是所有的浏览器都会这样处理应用在IMG元素上的伪元素。这是我整理的兼容性表格:
兼容性表格

* alt文本自由在图片的宽度足够容纳下它时才会显示,如果图片没有宽度,alt文本压根不会显示

** 字体样式不会起作用

译者注:
其实,针对IMG元素设置伪元素是非常好的一种backup方案,即使针对某些不支持该特性的浏览器而言也是没有副作用。因此在通常针对IMG元素使用base64占位符的实现下,尝试另外一种风格的实现也未尝不可。这样不仅仅减少了许多代码量,而且保证了全站图片加载失败所呈现的一致性。

打赏支持我写出更多好文章,谢谢!

打赏作者

打赏支持我写出更多好文章,谢谢!

1 3 收藏 评论

关于作者:欲休

前端自由人 个人主页 · 我的文章 · 1 ·  

相关文章

可能感兴趣的话题



直接登录
跳到底部
返回顶部