css背景图片加载失败,页面部分图标无法显示
1、问题表现:首屏缺失部分图标。点击按钮切换为激活状态时,部分按钮的激活态图标无法显示。


2、问题原因:网络极差,断断续续,点击时添加class:active变为激活态,
active.png这张图片是在添加active这个class才加载的,
css背景图片只加载一次,不管成功还是失败都不再加载第二次了,
所以刚好网络断掉时加载了active.png失败,不刷新的话,以后就再也看不到这张图片了


3、解决办法:
方法一: 把所有图片做成spirit图,首次就可以把所有图片加载好,不会出现部分图片丢失的怪异情形
方法一:(1) 检测图片丢失,我是让android端的app开发检测并调用我的前端 js 图片加载程序
(2) 前端 js 图片加载程序的实现:取app后台传出的加载失败的图片路径,用js将此路径绑定到style标签的任意class即可实现重新加载图片

注解:
1、 前端检测背景图片加载失败,我不知道有什么好办法,window.addEventListener('error',function(e){})这种方法检测不到背景图片加载失败
2、js在style标签中引入新的url ,会让页面刷新
css背景图片加载失败,页面部分图标无法显示的更多相关文章
- 当h5页面图片加载失败后,给定一个默认图
本文主要讨论页面中图片加载失败后替换默认图片的几种方式 重点来了:一定要记住error事件不冒泡. 相关的知识点:jquery的ready方法.$("img").error().i ...
- vue+webpack项目打包后背景图片加载不出来问题解决
在做VUE +的WebPack脚手架项目打包完成后,在IIS服务器上运行发现项目中的背景图片加载不出来检查项目代码发现是因为CSS文件中,背景图片引用的路径问题;后来通过修改配置文件,问题终于解决了, ...
- angular 图片加载失败 情况处理? 如何在ionic中加载本地图片 ?
1.angular 图片加载失败 情况处理 在directive中定义组件,在ng-src错误时,调用err-src app.directive('errSrc',function(){ return ...
- 伪元素黑魔法:一个替代onerror解决图片加载失败的方案
问题的引出是这样的,在一个项目中有大量的页面主体是table做数据展示,所以就封装了一个table的组件,提供动态渲染的方案.有个问题是数据类型中有图片,对于图片的加载失败我们需要做容错.一般我们的思 ...
- vue 首页背景图片加载完成前增加 loading 效果 -- 使用 new Image() 实现
1. 创建 loading 公用组件 <template> <div class="load-container"> <div class=" ...
- js img图片加载失败,重新加载+断网检查
我们常常会遇到img加载图片的时候因为网络问题或者图片过大导致图片加载失败的问题,页面就因为这张蹦掉的图变得不美观.所以我们需要图片加载失败的时候重新加载图片,前端图片加载优化 //js方法定义 fu ...
- AngularJS中如果ng-src 图片加载失败怎么办
我们知道AngularJS加载图片的方法是用技术分享加ng-src标签,例如: <img ng-src="{{currentUrl}}"/> 其中currentUrl为 ...
- 当图片加载失败时更换图片, Firefox onerror 报错
当图片加载失败时更换图片. <!DOCTYPE html> <meta charset="UTF-8"> <img src="http:// ...
- WebForm、MVC图片加载失败处理
还是那个该死的WebFrom项目,部分功能替换为MVC后感觉好多了,但是WebForm.MVC都有图片加载失败时显示提示图片的需求,并且统一在js中处理.问题来了,js中图片路径怎么处理呢?现场有可能 ...
随机推荐
- Python 图像处理 OpenCV (2):像素处理与 Numpy 操作以及 Matplotlib 显示图像
前文传送门: 「Python 图像处理 OpenCV (1):入门」 普通操作 1. 读取像素 读取像素可以通过行坐标和列坐标来进行访问,灰度图像直接返回灰度值,彩色图像则返回B.G.R三个分量. 需 ...
- windows上docker部署springboot多实例
前提条件: 1.可以运行jar包的环境2.机器上已经安装了docker3.准备部署的springboot的jar包4.Dockerfile文件 准备Dockerfile FROM java:8 VOL ...
- Nginx 、MySQL、Django 在 Docker-compose 中的部署
概述 本文主要记录了在 Linux 3.10.0-1062.el7.x86_64 下使用 docker-compose 搭建服务的过程,由于公司服务器在内网中,搭建镜像及下载依赖时需要外部代理,如果本 ...
- Kali Linux 2020.1安装以及安装后要做的事
Kali Linux是基于Debian的Linux发行版,预装了许多渗透测试软件,让大家从各种繁琐的软件安装中解脱出来,专注于测试本身. 本文章介绍了如何安装目前最新的2020.1版本,以及安装好后补 ...
- Java 解决采集UTF-8网页空格变成问号乱码
http://blog.csdn.net/bob007/article/details/27098875 使用此方法转换后,在列表中看到的正常,但是在详情页的文本框中查看到的就是 了,只好过滤掉所有的 ...
- JavaScript中setInterval关闭问题
这篇博客主要记录下学习中碰到的一些问题(以防忘记). JavaScript中,在setInterval中关闭该定时器,但是此次执行也会完成,用语言描述不太容易,直接看代码: var i=1; var ...
- 王玉兰201771010128实验二 Java基本程序设计
第一部分:理论知识学习部分: (1)标识符:标识符由字母.下划线.美元符号和数字组成,且第一个符号不能为数字.Hello.$1234.程序名.www_123都是合法标识符.标识符可用作类名.变量名. ...
- Educational Codeforces Round 56 (Rated for Div. 2) F. Vasya and Array
题意:长度为n的数组,数组中的每个元素的取值在1-k的范围内或者是-1,-1代表这个元素要自己选择一个1-k的数字去填写,然后要求填完的数组中不能出现连续长度大于len的情况,询问填空的方案数. 题解 ...
- PAT-1063 Set Similarity (set集合)
1063. Set Similarity Given two sets of integers, the similarity of the sets is defined to be Nc/Nt*1 ...
- 循序渐进VUE+Element 前端应用开发(1)--- 开发环境的准备工作
之前一直采用VS进行各种前端后端的开发,随着项目的需要,正逐步融合纯前端的开发模式,开始主要选型为Vue + Element 进行BS前端的开发,后续会进一步整合Vue + AntDesign的界面套 ...