html 图片加载错误,CSS 无图片显示加载(&失败)效果

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