CSS 无图片显示加载(&失败)效果

brook

lazyload 时利用 iconfont 显示加载图片和加载失败效果

0. 效果

clipboard.png

查看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. 参考

阅读 10.9k

前端小站
CSS, javascript, gulp, front end, .etc

Front end developer v.12

3.1k 声望
55 粉丝
0 条评论

Front end developer v.12

3.1k 声望
55 粉丝
文章目录
宣传栏