美化加載失敗的圖片

加載失敗的圖片會很難看。

但事實上並不老是必定要這樣。咱們能夠用 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;

}

若是加載成功，圖片會正常顯示全部的樣式。僞元素也徹底不會生成。

瀏覽器兼容性

很不幸，不是全部的瀏覽器均可以用相同的方式處理加載失敗的圖片。對於某些瀏覽器，即便圖片沒有呈現，僞元素也根本不會顯示。

這是我經過本身的測試得出的兼容性結論：

• 備選文本只有在圖片的寬度足夠容納它的時候纔會顯示。若是圖片沒有指定寬度，備選文本根本不會顯示

** 字體樣式不生效

至於那些不支持僞元素的瀏覽器，應用的樣式會被忽略，因此它們不會產生破壞。這就是說咱們仍然能夠爲那些使用支持僞元素瀏覽器的用戶應用美化樣式，提供更加友好的體驗。