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背景图片加载失败,页面部分图标无法显示的更多相关文章

  1. 当h5页面图片加载失败后,给定一个默认图

    本文主要讨论页面中图片加载失败后替换默认图片的几种方式 重点来了:一定要记住error事件不冒泡. 相关的知识点:jquery的ready方法.$("img").error().i ...

  2. vue+webpack项目打包后背景图片加载不出来问题解决

    在做VUE +的WebPack脚手架项目打包完成后,在IIS服务器上运行发现项目中的背景图片加载不出来检查项目代码发现是因为CSS文件中,背景图片引用的路径问题;后来通过修改配置文件,问题终于解决了, ...

  3. angular 图片加载失败 情况处理? 如何在ionic中加载本地图片 ?

    1.angular 图片加载失败 情况处理 在directive中定义组件,在ng-src错误时,调用err-src app.directive('errSrc',function(){ return ...

  4. 伪元素黑魔法:一个替代onerror解决图片加载失败的方案

    问题的引出是这样的,在一个项目中有大量的页面主体是table做数据展示,所以就封装了一个table的组件,提供动态渲染的方案.有个问题是数据类型中有图片,对于图片的加载失败我们需要做容错.一般我们的思 ...

  5. vue 首页背景图片加载完成前增加 loading 效果 -- 使用 new Image() 实现

    1. 创建 loading 公用组件 <template> <div class="load-container"> <div class=" ...

  6. js img图片加载失败,重新加载+断网检查

    我们常常会遇到img加载图片的时候因为网络问题或者图片过大导致图片加载失败的问题,页面就因为这张蹦掉的图变得不美观.所以我们需要图片加载失败的时候重新加载图片,前端图片加载优化 //js方法定义 fu ...

  7. AngularJS中如果ng-src 图片加载失败怎么办

    我们知道AngularJS加载图片的方法是用技术分享加ng-src标签,例如: <img ng-src="{{currentUrl}}"/> 其中currentUrl为 ...

  8. 当图片加载失败时更换图片, Firefox onerror 报错

    当图片加载失败时更换图片. <!DOCTYPE html> <meta charset="UTF-8"> <img src="http:// ...

  9. WebForm、MVC图片加载失败处理

    还是那个该死的WebFrom项目,部分功能替换为MVC后感觉好多了,但是WebForm.MVC都有图片加载失败时显示提示图片的需求,并且统一在js中处理.问题来了,js中图片路径怎么处理呢?现场有可能 ...

随机推荐

  1. 页面中js接收tp5 assign方式传过来的数组对象

    <script type="text/javascript"> var arr='<?php echo json_encode($nav) ?>'; var ...

  2. Codeforces Round #643 (Div. 2)(C ~ E)

    C. Count Triangles 题目链接 : https://codeforces.com/contest/1355/problem/C 题目大意 : 给你 A , B , C , D 问有多少 ...

  3. webpack的proxytable的配置

    这个一定不能忘记了/rest/后面的/,否则就是404找不到接口 这样的实现效果是 this.axios.post('/api/delShare', qs.stringify({'Id':Number ...

  4. C# 数据操作系列 - 9. EF Core 完结篇

    0.前言 <EF Core>实际上已经可以告一段落了,但是感觉还有一点点意犹未尽.所以决定分享一下,个人在实际开发中使用EF Core的一些经验和使用的扩展包. 1. EF Core的异步 ...

  5. 【Android】是时候为你的应用加上WebDav同步了

    WebDav是什么? WebDAV (Web-based Distributed Authoring and Versioning) 一种基于 HTTP 1.1协议的通信协议.它扩展了HTTP 1.1 ...

  6. mybatis多对一与一对多

    步骤: 1.创建maven项目 2.编写工具类 3.编写实体类 4.编写mapper接口 5.配置xml 6.测试 多对一:多个学生关联一个老师 工具类: //sqlSessionFactory -- ...

  7. k8s big-ip control 安装使用

    k8s big-ip control 安装使用 0. 准备工作 网络打通,这里没有使用fannel,没有使用vxlan . 在f5界面 创建f5分区.这里是cce-test. 1. 安装bigip c ...

  8. 【雕爷学编程】Arduino动手做(54)---大按键点动模块

    37款传感器与模块的提法,在网络上广泛流传,其实Arduino能够兼容的传感器模块肯定是不止37种的.鉴于本人手头积累了一些传感器和模块,依照实践(动手试试)出真知的理念,以学习和交流为目的,这里准备 ...

  9. Element Form表单实践(上)

    作者:小土豆biubiubiu 博客园:https://www.cnblogs.com/HouJiao/ 掘金:https://juejin.im/user/58c61b4361ff4b005d9e8 ...

  10. 使用基于MVC2模式创建新闻网站

    1.什么是MVC MVC全名是Model View Controller,是模型(model)-视图(view)-控制器(controller)的缩写,一种软件设计典范,用一种业务逻辑.数据.界面显示 ...