lazyload 时利用 iconfont 显示加载图片和加载失败效果
0. 效果
1. 显示加载中或者品牌图
可以是文字或者 iconfont, 并将图标显示到正中间
HTML 结构如下：
.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. 参考
