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

hearaway 发布于2019-08-30 13:00 / 3003人阅读

摘要：时利用显示加载图片和加载失败效果效果查看显示加载中或者品牌图可以是文字或者并将图标显示到正中间结构如下使图片加载后能够后直接盖住图标利用加载图片加载加粗文字失败后更改图标或文字这里需要用在图片里添加隐藏出错图片效

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

0. 效果

查看demo

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

SCSS 部分使用了 http://bourbon.io/

直接使用 img:after，兼容性不好

GPU云服务器云服务器加载css失败效果显示 css jquery js 显示数据加载动画效果服务器图片加载失败

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/115230.html

vue3.x使用swiperUI动态加载图片失败的解决方案

　　想必大家对于vue3.x都很了解，那在vue3.x使用swiperUI动态加载图片失败时候如何解决？以下就为大家介绍两个常见问题：　　1、在动态加载图片是空，需要显示默认图片时使用v-if失效　　<divclass="swiper-containerhome_swiper"> 　　<divclass="swiper-wrapper"v-...

3403771864 2022-09-08 21:44 评论0 收藏0
html&amp;css面试笔记

摘要：什么叫优雅降级和渐进增强渐进增强针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果交互等改进和追加功能达到更好的用户体验。优雅降级一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。 1、CSS选择器有哪些？它们的优先级是怎样的？选择器类型： id选择器（ # myid）类选择器（.myclassname）标签选择器 ...

maochunguang 2019-08-29 16:14 评论0 收藏0
html&amp;css面试笔记

摘要：什么叫优雅降级和渐进增强渐进增强针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果交互等改进和追加功能达到更好的用户体验。优雅降级一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。 1、CSS选择器有哪些？它们的优先级是怎样的？选择器类型： id选择器（ # myid）类选择器（.myclassname）标签选择器 ...

zhangwang 2019-08-02 11:07 评论0 收藏0
html&amp;&amp;css

摘要：标准模式的排版和运作模式都是以该浏览器支持的最高标准运行。这种合并外边距的方式被称为折叠，并且因而所结合成的外边距称为折叠外边距。控制表单控件的禁用状态。首先，巧妙的使用这一标记，将游览器从所有情况中分离出来。 1.Doctype作用？标准模式与兼容模式各有什么区别声明位于位于HTML文档中的第一行，处于标签之前。告知浏览器的解析器,用什么文档标准解析这个文档。DOCTYPE不存在...

gggggggbong 2019-08-29 16:16 评论0 收藏0