美化加载失败的图片

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

但事实上并不总是一定要这样。我们可以用 CSS 在 <img> 标签上应用样式，来提供比默认情况更好的体验。

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

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

1. 我们可以在 <img> 元素上应用常规排版相关的样式。如果图片的备选文本显示的话，这些样式会在其上生效，并且不会影响正常加载的图片。

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

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

上手练习

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

 

XHTML

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

 

添加有用的信息

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

 

CSS

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;

}

 

替换默认的备选文本

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

 

CSS

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%;

 

}

 

其他的美化样式

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

 

CSS

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%;

 

  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;}

如果加载成功，图片会正常显示所有的样式。伪元素也完全不会生成。

浏览器兼容性

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

这是我通过自己的测试得出的兼容性结论：

Browser	Alt Text	:before	:after
Chrome (Desktop and Android)	✓	✓	✓
Firefox (Desktop and Android)	✓	✓	✓
Opera (Desktop)	✓	✓	✓
Opera Mini	✓ **	✗	✗
Safari (Desktop and iOS)	✓ *	✗	✗
iOS Webview (Chrome, Firefox, others)	✓ *	✗	✗

* 备选文本只有在图片的宽度足够容纳它的时候才会显示。如果图片没有指定宽度，备选文本根本不会显示
** 字体样式不生效

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

出自：http://web.jobbole.com/86079/

转载于:https://www.cnblogs.com/-simon/p/5916872.html