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. blog url.txt

    java 回收机制与虚拟机http://www.cnblogs.com/zhanglei93/p/6636831.html Java 编程经验(牛人写的)  上/下http://www.thinksa ...

  2. ohasd failed to start: Inappropriate ioctl for device

    今天同事在安装GI的时候出现故障.让我帮忙看一下. 以下记录例如以下: 问题现象: 在安装gi的时候运行root.sh报例如以下错误: Finished running generic part of ...

  3. Redis之最大内存置换策略

    0.前言 Redis默认最大内存大小是应用程序可访问的内存大小, 32位windows下是2GB, linux下是3GB. 64位下可以访问的内存为2^64字节, Redis提供了maxmemory字 ...

  4. 【Akka】在并发程序中使用Future

    引言 在Akka中, 一个Future是用来获取某个并发操作的结果的数据结构.这个操作一般是由Actor运行或由Dispatcher直接运行的. 这个结果能够以同步(堵塞)或异步(非堵塞)的方式訪问. ...

  5. [ci]持续集成系列

    持续集成一直很蛋疼,感觉没底. 几个方面来写 1,搭建gitlab 配邮箱 域名等使之好用 2,搭建jenkins –yum,安装常见插件 3,搭建sonar,汉化 4,安装sonar-scanner ...

  6. Qt 推断一个IP地址是否有效

    QHostAddress test; if (!test.setAddress("111.111.111.1")) { ui->statusBar->showMessa ...

  7. hdu 4059 数论+高次方求和+容斥原理

    http://acm.hdu.edu.cn/showproblem.php? pid=4059 现场赛中通过率挺高的一道题 可是容斥原理不怎么会.. 參考了http://blog.csdn.net/a ...

  8. grub手动引导win7

    grub>rootnoverify (hd0,0)--->win7系统安装盘号 grub > chainloader +1 grub > makeactive     ---& ...

  9. java代码中fastjson生成字符串和解析字符串的方法和javascript文件中字符串和json数组之间的转换方法

    1.java代码中fastjson生成字符串和解析字符串的方法 List<TemplateFull> templateFulls = new ArrayList<TemplateFu ...

  10. 设置一个label显示多种颜色,多种字体大小

    UILabel* label = [[UILabel alloc] init]; label.frame = CGRectMake(0, 100, 200, 100); label.textColor ...