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为 ...
随机推荐
- jrebel license server 激活方法
方法1: 使用已经封装好的jar包,保持一直运行即可(放到服务器上). 链接:https://pan.baidu.com/s/1rrn-6F26JpD5RSsbJV3-hQ 密码: dscu 服务器上 ...
- Maven 命令行创建项目时 Could not find goal ‘create’ in plugin org.apache.maven.plugins:...
使用maven3.3.9 版本,进行命令行创建项目时输入以下命令创建失败 mvn archetype:create -DgroupId=com.zang.maven -DartifactId=sys ...
- NodeJS淘宝 CNPM 镜像
原文地址:http://npm.taobao.org/ 设置NPM镜像(前提已安装NodeJS): npm config set registry https://registry.npm.taoba ...
- atitit.跨语言执行cmd cli api的原理及兼容性设计草案
atitit.跨语言执行cmd cli api的原理及兼容性设计草案 1. 标准输入,标准输出,标准错误与重新定向1 2. 常见问题2 2.1. 执行bat文件2 2.2. 执行bat文件 /c ...
- 怎样优雅的研究 RGSS3 番外(一) ruby 实现的后缀自己主动机
*我真的不会 ruby 呀* #encoding:utf-8 #==================================================================== ...
- 美团HD(8)-利用NSPredicate匹配搜索结果
监听文本框改变: DJSelectCityViewController.m /** 当searchBar内的文字发生改变时调用此方法 */ - (void)searchBar:(UISearchBar ...
- linux学习之缓存机制
linux中的缓存机制 在Linux系统中,为了提高文件系统性能,内核利用一部分物理内存分配出缓冲区,用于缓存系统操作和数据文件,当内核收到读写的请求时,内核先去缓存区找是否有请求的数据,有就直接返回 ...
- linux c 和c++ 键盘输入不在控制台显示
#include <stdio.h>#include <stdlib.h> #define TTY_PATH "/dev/tty"#define STTY_ ...
- MII接口概念简述
MII: Medium Independent Interface 媒体独立接口,也称介质无关接口 RMII: Reduced MII 简化媒体独立接口 GMII: Gigabit Medium In ...
- D. Powerful array 离线+莫队算法 给定n个数,m次查询;每次查询[l,r]的权值; 权值计算方法:区间某个数x的个数cnt,那么贡献为cnt*cnt*x; 所有贡献和即为该区间的值;
D. Powerful array time limit per test seconds memory limit per test megabytes input standard input o ...