img标签设置默认图片
为了美观当网页图片不存在时不显示叉叉图片
当在页面显示的时候,万一图片被移动了位置或者丢失的话,将会在页面显示一个带X的图片,很是影响用户的体验。即使使用alt属性给出了”图片XX”的提示信息,也起不了多大作用。
其实,可以这样处理:当图片不存在的时候,会触发onerror事件,我们可以在该事件中做一下补救的工作,比如:
1、让这个图片元素隐藏:
<img src="图片的url地址" alt="图片XX" onerror="this.style.display='none'"/>
2、用默认的图片替换:
<img src="图片的url地址" alt="图片XX" onerror="this.src='默认图片的url地址'"/>
注意:如果使用不当,在IE内核的浏览器下会造成死循环。比如:当【默认图片的url地址】也加载不成功(比如网速比较慢的时候)或不存在的话,就会反复的加载,最后造成堆栈溢出错误。
因此, 需要用下面两种方法解决:
a、更改 onerror 代码为其它处理方式或者确保 onerror 中的默认图片足够小,并且存在。
b、控制onerror事件只触发一次,需要增加这句话:this.onerror=null; 增加后如下:
<img src="图片的url地址" alt="图片XX" onerror="this.src='默认图片的url地址';this.onerror=null"/>
经测试,上面的方法在IE各个版本及谷歌、火狐浏览器中都支持。
img标签设置默认图片的更多相关文章
- img标签使用默认图片的一种方式
基于html5提供的onerror这个时间属性.
- 微信小程序开发——设置默认图片、错误加载图片
小程序不支持h5中的onerrorimg,只开放了binderror属性,当错误发生时,会发布到 AppService,事件对象event.detail = {errMsg: 'something w ...
- img图片不存在时设置默认图片
当在页面显示的时候,万一图片被移动了位置或者丢失的话,将会在页面显示一个带X的图片,很是影响用户的体验.即使使用alt属性给出了"图片XX"的提示信息,也起不了多大作用. 其实,可 ...
- html select 标签设置默认选中
方法有两种. 第一种通过<select>的属性来设置选中项,此方法可以在动态语言如php在后台根据需要控制输出结果. 1 2 3 4 5 < select id = " ...
- img设置默认图片最简单的解决方法
<img src='图片的路径' onerror='this.src="如果图片不存在,则使用该图片"' 这个解决方法除了简单外,还有一个优点. 就是当你不知道图片是否存在, ...
- js解决img标签加载失败显示默认图片
问题: 为所有显示楼盘的页面添加一个加载失败的默认图片. 基本思路: img标签中有个onerror属性,专门用来处理加载失败的事件.所以可以用jquery添加onerror属性,在onerror中加 ...
- HTML中的<select>标签如何设置默认选中的选项
方法有两种. 第一种通过<select>的属性来设置选中项,此方法可以在动态语言如php在后台根据需要控制输出结果. 1 2 3 4 5 < select id = " ...
- js处理img标签加载图片失败,显示默认图片
1.第一种方法: 如果已经引入了jquery插件,就很好办.没有的话,如果实在需要,可以附上代码: script(type='text/javascript', src="http://aj ...
- 设置Input标签Date默认值为当前时间
需求:想设置Imput标签Date默认值为当前时间,通过JavaScript实现. <html> ...... <body> <input type="date ...
随机推荐
- oracle单行函数 之 时间函数
select systemdate from dual --得到时间 select systemdate+300 from dual --日期 +数字=日期,表示若干天之后的日期 select s ...
- 使用JAX-WS开发WebService
Axis2和CXF是目前流行的Webservice框架,这两个框架都属于重量级框架.相对而言,JAX-WS RI是一个轻量级的框架.开发WebService只需要很简单的几个步骤:写接口和实现-> ...
- P4609 [FJOI2016]建筑师
思路 裸的第一类斯特林数,思路和CF960G相同 预处理组合数和第一类斯特林数回答即可 代码 #include <cstdio> #include <cstring> #inc ...
- (zhuan) Speech and Natural Language Processing
Speech and Natural Language Processing obtain from this link: https://github.com/edobashira/speech-l ...
- Eclipse卸载插件SpringSoource-tool-suite
Eclipse卸载插件SpringSoource-tool-suite **系统环境:**Mac OS X 引子: 一直在纠结的一个问题,就是Eclipse开发java 项目在配置了InternalR ...
- 传输SO10 (SO10 Transport)
传输SO10 (SO10 Transport) 方法一. 手工添加到请求里面,格式为: R3TR TEXT text object, name, ID, language 方法二.使用程序:R ...
- Gym 100247A The Power of the Dark Side
https://vjudge.net/problem/Gym-100247A 题意: 每个绝地武士有三个能力值a,b,c,两个武士决斗时谁有两个值大于对方谁就是胜者(a和a比,b和b比,c和c比,所有 ...
- HDU 5782 Cycle(KMP+哈希)
http://acm.split.hdu.edu.cn/showproblem.php?pid=5782 题意:给出两个长度相等的字符串,输出两个字符的每个前缀是否循环相同. 思路: 如果连个串循环相 ...
- 前端分页插件bootstrapPaginator的使用
引入bootstrap-paginator.js <table class="table table-striped table-bordered table-hover dataT ...
- P4391 [BOI2009]Radio Transmission
描述: 给你一个字符串,它是由某个字符串不断自我连接形成的. 但是这个字符串是不确定的,现在只想知道它的最短长度是多少. 输入格式: 第一行给出字符串的长度,1 < L ≤ 1,000,000. ...