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. 【Python3 爬虫】05_安装Scrapy

    Scrapy简介 Scrapy是用纯Python实现一个为了爬取网站数据.提取结构性数据而编写的应用框架,用途非常广泛.框架的力量,用户只需要定制开发几个模块就可以轻松的实现一个爬虫,用来抓取网页内容 ...

  2. java IO,bufferedReader类

    1,掌握bufferedreader类作用 2,掌握键盘输入的基本格式. Buffer:表示缓冲区,之前的StringBuffer,缓冲区中的内容可以更改,可以提高效率. 如果要想接收任意长度的数据, ...

  3. webview漏洞 -转

    原文链接:http://www.cnblogs.com/goodhacker/p/3343837.html 一.漏洞描述 近期,微信等多款安卓流行应用曝出高危挂马漏洞:只要点击好友消息或朋友圈中的一条 ...

  4. Android AIDL Service 跨进程传递复杂数据

    黑夜 黑夜给了我黑色的眼睛,我却用它寻找光明~ 传值方式 AIDL是同意跨进程传递值的,一般来说有三种方式: - 广播:这样的算是比較常见的一种方式了,传递小数据不错 - 文件:这个是保存到文件里.然 ...

  5. Atitit.软件开发的非功能性需求attilax 总结At

    Atitit.软件开发的非功能性需求attilax 总结 1. 运行环境约束:用户对软件系统运行环境的要求. 1 2. 兼容性 2 3.   7.6 数据库 database (imp by ati) ...

  6. 迁移TFS 2012服务至新的电脑硬件

    迁移TFS 2012的时候碰到一些问题, 中文记录很少, 英文的记录也比较零散. 这里记录最直接和简单的方法. 环境: 1. 公司域环境, 所有TFS用户都是公司域帐户. 2. TFS从一台服务器转移 ...

  7. kafka 部分问题处理记录

    转载请注明原创地址:http://www.cnblogs.com/dongxiao-yang/p/7600561.html 一  broker启动后ReplicaFetcherThread OOM 版 ...

  8. java序列化,二进制和数据流

    类的序列化需要支持Serializable接口,如果类支持序列化,可以通过ObjectOutPutStream和ObjectInputStream将对象和Stream之间进行方便的转换. 首先来 看一 ...

  9. [转]从输入url到页面加载完成的过程中都发生了什么事情

    第一个问题:从输入 URL 到浏览器接收的过程中发生了什么事情? 从触屏到 CPU 首先是「输入 URL」,大部分人的第一反应会是键盘,不过为了与时俱进,这里将介绍触摸屏设备的交互. 触摸屏一种传感器 ...

  10. string 的函数

    string 有一个很好用到函数:substr(index). 去掉前index个字符.