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. Linux下默认的目录介绍

    目录/文件 用途 来源 / /处于Linux文件系统树形结构的最顶端,它是Linux文件系统的入口,所有的目录.文件.设备都在/之下. - /bin 该目录存放着系统最常用的最重要的命令,相当于DOS ...

  2. webpack 通用环境快速搭建

    能用babel编译es2015 . 能热编译.能加载静态资源(js/css/font/image).是一个很通用的开发环境,虽然不智能.但很好扩展 npm 安装列表: # webpack 核心 npm ...

  3. Unity3D - 发布Android游戏

    本文将介绍如何使用Unity3D来发布Android游戏,这里我使用的Unity3D版本为4.6.3f1 下载Java SDK 使用Unity3D来发布Android游戏时需要用到Android SD ...

  4. webdriver下拉框中选择option的方法提醒

    select这个标签比较特殊 下面的option不能用点击下拉框,再点击选中这种方法 前端代码: <html> <body> <select id="Shipp ...

  5. python 开发技巧(4)-- 用PyCharm实用技巧(我自己常用的)

    pycharm快捷键 1.快速导入类 Ctrl + Alt + Space 2.追踪类和方法的定义 Ctrl + b 3.复制当前行 Ctrl + d 4.移动当前行 Ctrl + Shift + ( ...

  6. 【转】如何彻底删除SVN中的文件和文件夹(附恢复方法)

    这里假设SVN项目的目录为 /data/svn/project,我们想排除trunk/test.exe文件和trunk/notallowed/目录,操作步骤如下及执行的svn命令(在svn安装目录的b ...

  7. Linux Linux程序练习一

    注意:在Linux中,"*"是一个通配符,代表所有字符,所以"*"必须要使用转义字符"\"

  8. java.lang.IllegalArgumentException: column '_id' does not exist问题的解决方案

    我在使用SimpleCursorAdapter的过程中遇到了问题: java.lang.IllegalArgumentException: column '_id' does not exist 这个 ...

  9. Spring入门第一例

    通过多天对基础语法的学习,早就向往一睹SPRING的芳容.今天按照ITEYE 唐的 教程,第一次运行Spring成功,步骤及注意事项如下: 一.基础环境 Jdk1.8, Eclipse4.71 .Sp ...

  10. C#调用python脚本

    因项目需要,需要使用C#控制台程序执行python脚本,查询各种资料后可以成功调用了,记录一下,以备后面遗忘. 只尝试了两种调用方式,第一种只适用于python脚本中不包含第三方模块的情况,第二种针对 ...