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中图片路径怎么处理呢?现场有可能 ...
随机推荐
- [linux] VNC the connection was refused by the computer
在用VNC 连接host的时候发现“”“the connection was refused by the computer ” 方法:发现登录这个host,敲打:verser 的时候出现了这个: 它 ...
- 高性能MySQL之索引深入原理分析
一.背景 我们工作中经常打交道的就是索引,那么到底什么是索引呢?例如,当一个SQL查询比较慢的时候,你可能会说给“某个字段加个索引吧”之类的解决方案. 总的来说索引的出现其实就是为了提高数据查询的效率 ...
- scrapy实现数据持久化、数据库连接、图片文件下载及settings.py配置
数据持久化的两种方式:(1)基于终端指令的持久化存储:(2)基于管道的持久化存储 基于终端指令的持久化存储 在爬虫文件的parse方法中必须要return可迭代对象类型(通常为列表或字典等)的返回值, ...
- POJ1015
题目链接:http://poj.org/problem?id=1015 大概题意: 法庭要挑选m人陪审团.先随机挑选n个公民,对于每个公民,控辩双方都有各自的“喜好度”p[ ] 和 d[ ],法庭要尽 ...
- Freemarker + iTextRender 实现根据模板网页生成PDF
#0 背景 工作需要实现导出PDF的功能,在进行简单调研后,我决定采用Freemarker + iTextRender进行实现. 基本思路如下: Freemarker实现根据动态数据渲染出需要导出的H ...
- Kubernetes as Database: 使用kubesql查询kubernetes资源
写在前面 kubectl虽然查询单个的kubernetes资源或者列表都已经比较方便,但是进行更为多个资源的联合查询(比如pod和node),以及查询结果的二次处理方面却是kubectl无法胜任的.所 ...
- 花6个月写的付费专栏,免费送|仿开源框架从零到一完整实现高性能、可扩展的RPC框架
作者 渡码,阿里巴巴码农,公众号:渡码 作者,专注大数据开发.数据分析和Python技术. 关注公众号 渡码 回复关键字 manis,可获取电子书.各章节和完整源代码,并且可加入读者群一起交流问题. ...
- zookeeper配置集群报错Mode: standalone
按照https://www.cnblogs.com/wrong5566/p/6056788.html 一步步配置好以后,老是启动显示Mode: standalone ,即单机模式启动. 经过排查,排除 ...
- Unity自定义Log
有如下两种方式,第一种借助了Unity自身的LogType枚举型:第二种则是纯粹地自己定义: public class Log { public Log(string message, UnityEn ...
- Mycat-多实例的搭建
1. 基础环境准备1.1 环境准备:两台虚拟机 db01 db02每台创建四个mysql实例:3307 3308 3309 33101.2 删除历史环境:pkill mysqldrm -rf /dat ...