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 透明，可能會導致占位圖與需要顯示的圖片重疊。