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