lazyload 时利用 iconfont 显示加载图片和加载失败效果
0. 效果
查看demo
1. 显示加载中或者品牌图
可以是文字或者 iconfont, 并将图标显示到正中间
HTML 结构如下：
<a rel="external nofollow" 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，兼容性不好