美化加载失败的图片

加载失败的图片会很难看。

但事实上并不老是必定要这样。咱们能够用 CSS 在 <img> 标签上应用样式，来提供比默认状况更好的体验。

两个关于 <img> 元素的真相

为了搞懂怎么样才能美化加载失败的图片，咱们须要先了解关于 <img> 元素的两种表现方式。

1. 咱们能够在 <img> 元素上应用常规排版相关的样式。若是图片的备选文本显示的话，这些样式会在其上生效，而且不会影响正常加载的图片。

2. <img> 元素是替换元素。这是一种“外观和大小都由外部资源来决定的元素”(Sitepoint)。由于这个元素是由外部资源所控制，因此 :before 和 :after 伪元素通常不会跟它一块儿生效。可是，当图片损坏或者没有加载时，这些伪元素就会显示出来。

基于以上这两点，咱们可以在 <img> 元素上应用只有当图片加载失败候会显示的样式，正常加载的图片并不会受到影响。

上手练习

利用这一信息，这里有几个美化加载失败图片的例子。须要用到下面这个损坏的连接。

<img src="http://bitsofco.de/broken.jpg" alt="Kanye Laughing">

添加有用的信息

处理加载失败图片的一种方法，就是给用户提示信息来讲明图片加载失败了。咱们甚至能够使用 attr() 这一语句来显示图片的连接地址。

img {  

  font-family: 'Helvetica';

  font-weight: 300;

  line-height: 2;  

  text-align: center;

  width: 100%;

  height: auto;

  display: block;

  position: relative;

}

img:before {  

  content: "We're sorry, the image below is broken :(";

  display: block;

  margin-bottom: 10px;

}

img:after {  

  content: "(url: " attr(src) ")";

  display: block;

  font-size: 12px;

}

替换默认的备选文本

或者，咱们能够使用伪元素来替换显示出来的默认备选文本，经过在默认文本上方放置一个伪元素的方式，使其在视图中隐藏。

img { /* Same as first example */ }

img:after {  

  content: "f1c5" " " attr(alt);

  font-size: 16px;

  font-family: FontAwesome;

  color: rgb(100, 100, 100);

  display: block;

  position: absolute;

  z-index: 2;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background-color: #fff;

}

其余的美化样式

除了显示自定义信息（或者说换一种方法），咱们还能够使用伪元素给加载失败的图片应用更多的样式。

img {  

  /* Same as first example */

  min-height: 50px;

}

img:before {  

  content: " ";

  display: block;

  position: absolute;

  top: -10px;

  left: 0;

  height: calc(100% + 10px);

  width: 100%;

  background-color: rgb(230, 230, 230);

  border: 2px dotted rgb(200, 200, 200);

  border-radius: 5px;

}

img:after {  

  content: "f127" " Broken Image of " attr(alt);

  display: block;

  font-size: 16px;

  font-style: normal;

  font-family: FontAwesome;

  color: rgb(100, 100, 100);

  position: absolute;

  top: 5px;

  left: 0;

  width: 100%;

  text-align: center;

}

若是加载成功，图片会正常显示全部的样式。伪元素也彻底不会生成。

浏览器兼容性

很不幸，不是全部的浏览器均可以用相同的方式处理加载失败的图片。对于某些浏览器，即便图片没有呈现，伪元素也根本不会显示。

这是我经过本身的测试得出的兼容性结论：

• 备选文本只有在图片的宽度足够容纳它的时候才会显示。若是图片没有指定宽度，备选文本根本不会显示

** 字体样式不生效

至于那些不支持伪元素的浏览器，应用的样式会被忽略，因此它们不会产生破坏。这就是说咱们仍然能够为那些使用支持伪元素浏览器的用户应用美化样式，提供更加友好的体验。