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.οnerrοr=null; 增加后如下:
<img src="图片的url地址" alt="图片XX" onerror="this.src='默认图片的url地址';this.οnerrοr=null"/>
经测试,上面的方法在IE各个版本及谷歌、火狐浏览器中都支持
img图片属性
vertical-align用来设置垂直对齐方式,所有垂直对齐的元素都会影响行高
值: baseline | sub | super | top | text-top | middle | bottom | text-bottom | <length> | <percentage> | inherit
初始值: baseline
应用于: 行内元素、替换元素、表单元格
继承性: 无
百分数: 相对于元素的行高line-height
[注意]IE7-浏览器中vertical-align的百分比值不支持小数行高,且取baseline、middle、text-bottom等值时与标准浏览器在展示效果不一样,常用的解决办法是将行内元素设置display:inline-block
vertical-align:baseline(元素的基线与父元素的基线对齐)
vertical-align:sub(降低元素的基线到父元素合适的下标位置)
vertical-align:super(升高元素的基线到父元素合适的上标位置)
vertical-align:bottom(把对齐的子元素的底端与行框底端对齐)
vertical-align:text-bottom(把元素的底端与父元素内容区域的底端对齐)
vertical-align:top(把对齐的子元素的顶端与行框顶端对齐)
vertical-align:text-top(把元素的顶端与父元素内容区域的顶端对齐)
vertical-align:middle(元素的中垂点与父元素的基线加1/2父元素中字母X的高度对齐)
vertical-align:(+-n)px(元素相对于基线上下偏移npx)
vertical-align:x%(相对于元素的line-height值)
vertical-align:inherit(从父元素继承vertical-align属性的值)
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/158916.html原文链接:https://javaforall.cn
相关文章
- Java——你真的了解Java异常处理机制吗?[通俗易懂]
- ORA-00607 Internal error occurred while making a change to a data block处理[通俗易懂]
- Python 的 map 函数也可以处理多个参数的函数
- 3.Android-传感器开发-处理各种传感器配置[通俗易懂]
- LightGBM源码阅读+理论分析(处理特征类别,缺省值的实现细节)[通俗易懂]
- ORA-24794: no active DTP service found ORACLE 报错 故障修复 远程处理
- ORA-25352: no current transaction ORACLE 报错 故障修复 远程处理
- ORA-30009: Not enough memory for string operation ORACLE 报错 故障修复 远程处理
- ORA-39601: Hash key is required. ORACLE 报错 故障修复 远程处理
- MySQL Error number: 3656; Symbol: ER_RESOURCE_GROUP_BUSY; SQLSTATE: HY000 报错 故障修复 远程处理
- ORA-02060: select for update specified a join of distributed tables ORACLE 报错 故障修复 远程处理
- ORA-06311: IPA: Maximum number of servers reached ORACLE 报错 故障修复 远程处理
- ORA-19108: WHITESPACE keyword expected ORACLE 报错 故障修复 远程处理
- PostgreSQL 42P14: invalid_prepared_statement_definition 报错 故障修复 远程处理
- 处理超时订单Redis监听机制实践(订单超时监听redis)
- MySQL中处理ATM交易的流程分析(MySQL中ATM)
- MySQL语句中如何处理空值(mysql不是非空的语句)
- JavaScript通过attachEvent和detachEvent方法处理带参数的函数