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. iOS项目中的网络请求和上下拉刷新封装

    代码地址如下:http://www.demodashi.com/demo/11621.html 一.运行效果图 现在的项目中不可避免的要使用到网络请求,而且几乎所有软件都有上下拉刷新功能,所以我在此对 ...

  2. android中的样式主题和国际化

    一.Android中的样式和主题     1.1样式     样式是作用在控件上的,它是一个包含一个或者多个view控件属性的集合.android style类似网页设计中的css设计思路,可以让设计 ...

  3. Quartz.net基于数据库的任务调度管理(Only.Jobs)

    一 前言: 各大调度组件优缺点在这就不讨论了,使用Quartz.net是因为它可以执行秒级任务. Only.Jobs 项目通过将各Job存储在数据库中,启动一个专门的Job管理任务来循环调度各Job的 ...

  4. 转：EMQ（emqttd） 2.x 安装和使用（物联网传输控制协议的Broker）

    支持下国产开源. MQTT物联网传输控制协议:<MQTT-3.1.1-CN.pdf> 下载:emqttd-centos64-v2.0-rc.2-20161019.zip 安装: $ unz ...

  5. 对象关系映射 EmitMapper 及Tuple的使用

    public TDestination Map<TSource, TDestination>(TSource tSource) { if (tSource == null) return ...

  6. JQuery实现ajax跨域

    AJAX 的出现使得网页可以通过在后台与服务器进行少量数据交换,实现网页的局部刷新.但是出于安全的考虑,ajax不允许跨域通信.如果尝试从不同的域请求数据,就会出现错误.如果能控制数据驻留的远程服务器 ...

  7. Notes from Data Guard

    There are two types of Standby databases: 1, Physical standby database block-for-block basis the phy ...

  8. 448. Find All Numbers Disappeared in an Array【easy】

    448. Find All Numbers Disappeared in an Array[easy] Given an array of integers where 1 ≤ a[i] ≤ n (n ...

  9. centos httpd服务做yum本地源，以及安装Mysql

    step0 首先centos的iso文件是有两张的,dvd1和dvd2,dvd2是额外的软件,常有的一些软件都在dvd1里面,而且repodata配置文件也在dvd1里面,如果直接把dvd2当做镜像文 ...

  10. 你设计的应用是IO依赖型还是CPU依赖型？

    这个话题可能看起来非常枯燥,但它对mysql的性能优化非常重要. 其实我在MYSQL 咨询工作中无时无刻接不在接触这类问题. IO工作负载与cpu依赖全然不同,尤其是当你的工作集(通常仅仅有数据库的一 ...