CSS 無圖片顯示加載(&失敗)效果

lazyload 時利用 iconfont 顯示加載圖片和加載失敗效果

0. 效果

查看demo

1. 顯示加載中或者品牌圖

能夠是文字或者 iconfont, 並將圖標顯示到正中間
HTML 結構以下：

<a href="javascript:" class="img-wrap img-placeholder">
  <img data-src="http://ww2.sinaimg.cn/large/6eba2496gw1f3uya0kdfej20hs0b440w.jpg" />
</a>

.img-placeholder {
  font-size: 6em; line-height: 1; color: #999 !important;
  position: relative;

  &::after {
    content: 'Loading';
    @include position(absolute, 50% 0 null);
    margin-top: -.5em;
    line-height: inherit;
    z-index: -1; // 使圖片加載後可以後直接蓋住圖標
  }
}

2. 利用 lazyload 加載圖片

3. 加載加粗文字失敗後更改圖標（或文字）

這裏須要用 js 在圖片 onerror 裏添加 class="img-error"

&.img-error::after {
  content: 'Load failed';
  font-size: 20px;
}
&.img-error img {
  display: none; // 隱藏出錯圖片
}

效果和完整代碼見上面 demo

4. 參考

• SCSS 部分使用了 http://bourbon.io/

• 直接使用 img:after，兼容性很差