JavaScript-onerror事件:图片加载失败后不显示
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事件:图片加载失败后不显示的更多相关文章
- 当h5页面图片加载失败后,给定一个默认图
本文主要讨论页面中图片加载失败后替换默认图片的几种方式 重点来了:一定要记住error事件不冒泡. 相关的知识点:jquery的ready方法.$("img").error().i ...
- 伪元素黑魔法:一个替代onerror解决图片加载失败的方案
问题的引出是这样的,在一个项目中有大量的页面主体是table做数据展示,所以就封装了一个table的组件,提供动态渲染的方案.有个问题是数据类型中有图片,对于图片的加载失败我们需要做容错.一般我们的思 ...
- electron-vue 图片加载失败后使用默认头像
<img :src="item.headUrl" alt="" class="contact-head" :onerror=" ...
- js 图片加载完后的处理事件
//图片加载完成后再显示页面 document.getElementById('icon').onload=function(){ document.getElementById('wrap').st ...
- 当图片加载失败时更换图片, Firefox onerror 报错
当图片加载失败时更换图片. <!DOCTYPE html> <meta charset="UTF-8"> <img src="http:// ...
- js 图片加载失败处理方法
在项目中不可避免会用到图片,尤其是列表,有时候图片会加载失败:这样就会显示一个很难看的坏图片缩略图:下面介绍两种方法,解决这个问题: 1.如果在你的项目中有引入jQuery插件,你可以使用error( ...
- js img图片加载失败,重新加载+断网检查
我们常常会遇到img加载图片的时候因为网络问题或者图片过大导致图片加载失败的问题,页面就因为这张蹦掉的图变得不美观.所以我们需要图片加载失败的时候重新加载图片,前端图片加载优化 //js方法定义 fu ...
- img error 图片加载失败的最佳方案
有时候, 当img的src加载失败, 会显示缺省碎片图片, 影响用户体验. 有一个js事件onerror就派上了用场. 它可以在加载失败时, 显示缺省的图片. 它有两种使用方式. 第一种: 使用纯 ...
- AngularJS中如果ng-src 图片加载失败怎么办
我们知道AngularJS加载图片的方法是用技术分享加ng-src标签,例如: <img ng-src="{{currentUrl}}"/> 其中currentUrl为 ...
随机推荐
- unsupported major.minor version 解决方法
转载自http://hi.baidu.com/fatchong/blog/item/191da23b478bbfef15cecbae.html 一直以来都是用jdk1.5,这次 ...
- js实现可兼容IE、FF、Chrome、Opera及Safari的音乐播放器
代码如下: /** 音乐播放器 * @param obj 播放器id * @param file 音频文件 mp3: ogg: * @param loop 是否循环 */ function audio ...
- kafka分布式搭建
kafka分布式搭建 (192.168.230.129)master (192.168.230.130)slave1 (192.168.230.131)salve2 在master.slave1.sl ...
- Win7安装.Net framework 3.5时出错的某解决办法
情况: Win7卸载了.Net Framework 3.5后, 做了些盘符的Symlink操作, 将一些大文件从C盘移到D盘. 再次安装.Net 3.5时, 怎么都装不上, 直接下载离线安装包, 一装 ...
- 动态设置spring配置PropertyPlaceholderConfigurer location的路径
在spring中经常将常用的属性放在properties文件中,然后再spring的配置文件中使用PropertyPlaceholderConfigurer引用properties文件.对于web项目 ...
- Quarta介绍
环境:XP+Myeclipse6.5+JDK1.6 quartz官网:http://www.quartz-scheduler.org/ 参考资料 1 Quartz任务调度快速入门 http://www ...
- MapReduce源码分析之作业Job状态机解析(一)简介与正常流程浅析
作业Job状态机维护了MapReduce作业的整个生命周期,即从提交到运行结束的整个过程.Job状态机被封装在JobImpl中,其主要包括14种状态和19种导致状态发生的事件. 作业Job的全部状态维 ...
- IOS设计模式的六大设计原则之接口隔离原则(ISP,Interface Segregation Principle)
定义 客户端不应该依赖它不需要的接口: 一个类对另一个类的依赖应该建立在最小的接口上. 定义解读 定义包含三层含义: 一个类对另一个类的依赖应该建立在最小的接口上: 一个接口代表一个角色,不应该将不同 ...
- CF 482A(Diverse Permutation-相邻距离不同数为k的1~n全排列构造)
A. Diverse Permutation time limit per test 1 second memory limit per test 256 megabytes input standa ...
- Linux 文件管理(C语言库函数三)
找到当前目录 char *getcwd(char * buf,size_t size) getcwd函数把当前工作目录的绝对路径名复制到buf中,size指示buf的大小 如果buf不够大,不能装下整 ...