HTML:

<img src="http://www.mazey.net/images/upload/image/20170518/1495122198180663.gif" id="img1" onerror="hideImg1();">
<!--下面这个图加载失败但不会出现加载失败的样式-->
<img src="http://www.mazey.net/images/upload/image/20170518/1495120456257031error.png" id="img2" onerror="hideImg2();">

JavaScript:

//加载失败隐藏图片
function hideImg1(){
document.getElementById("img1").style.display="none";
}
function hideImg2(){
document.getElementById("img2").style.display="none";
}

说明:

JavaScript-onerror事件:当图片不存在时或者因为网络原因加载失败,将触发onerror事件。

本例触发onerror事件后将图片样式设为{display:none;}使其消失。

JavaScript-onerror事件:图片加载失败后不显示

JavaScript-onerror事件:图片加载失败后不显示的更多相关文章

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

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

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

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

  3. electron-vue 图片加载失败后使用默认头像

    <img :src="item.headUrl" alt="" class="contact-head" :onerror=" ...

  4. js 图片加载完后的处理事件

    //图片加载完成后再显示页面 document.getElementById('icon').onload=function(){ document.getElementById('wrap').st ...

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

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

  6. js 图片加载失败处理方法

    在项目中不可避免会用到图片,尤其是列表,有时候图片会加载失败:这样就会显示一个很难看的坏图片缩略图:下面介绍两种方法,解决这个问题: 1.如果在你的项目中有引入jQuery插件,你可以使用error( ...

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

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

  8. img error 图片加载失败的最佳方案

    有时候, 当img的src加载失败, 会显示缺省碎片图片,  影响用户体验.  有一个js事件onerror就派上了用场. 它可以在加载失败时, 显示缺省的图片. 它有两种使用方式. 第一种: 使用纯 ...

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

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

随机推荐

  1. Java 创建用户异常类、将异常一直向上抛、 throw和throws的区别

    如果java提供的系统异常类型不能满足程序设计的需求,那么可以设计自己的异常类型. 从java异常类的结构层次可以看出,java类型的公共父类为Throwable.在程序运行中可能出现俩种问题:一种是 ...

  2. mac下安装python pip、pyspider

    如果mac下没有安装wget,还需要安装wget,见http://www.cnblogs.com/cocowool/archive/2012/06/24/2560574.html 使用 pip 安装 ...

  3. C#中怎样将List&lt;自己定义&gt;转为Json格式 及相关函数-DataContractJsonSerializer

    对C#和.net使用List<自己定义>和Json格式相互转化的方法进行总结 关于JSON的入门介绍见http://www.json.org/ ,或者百度,这里不赘述,只是通过以下的样例会 ...

  4. [原创]如何让freeswitch转发客户端自定义的INFO消息

    如何让freeswitch转发客户端自定义的INFO消息 英文概述: this article is about how to configure freeswitch to forward self ...

  5. Atitit.atiDataStoreService   v2 新特性

    Atitit.atiDataStoreService   v2 新特性 1.1. V1  基础实现1 1.2. V2  增加了对  $uuid  $cur_uid参数的支持1 1.3. 增加了fld  ...

  6. Atitit.常用语言的常用内部api 以及API兼容性对源码级别可移植的重要性 总结

    Atitit.常用语言的常用内部api 以及API兼容性对源码级别可移植的重要性 总结 1.1. 要兼容的重要语言api1 1.2. 常用基础api分类 core api1 1.3. 比较常用的扩展库 ...

  7. HDU 4925 Apple Tree (瞎搞)

    找到规律,各一个种一棵树.或者施肥.先施肥,先种树一样. Apple Tree Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 2621 ...

  8. 李洪强iOS开发之OC[003] - 用钥匙串存储信息模拟登陆

  9. PLSQL配置数据库的方式

    1.直接连接的方式   2.修改客户端D:\app\Administrator\product\11.2.0\client_1\network\admin\tnsnames.ora文件的方式. ora ...

  10. 进出口流程 & 报关单据

    出口流程 一. 委托人 1. 需找货运代理公司 2. 向代理公司询问价格 一般为 ALL IN 价格( 空运费+燃油费+战险费 ) 总费用 = ALL IN 价格 * ( 货物公斤数 ) ALL IN ...