为了美观当网页图片不存在时不显示叉叉图片
当在页面显示的时候,万一图片被移动了位置或者丢失的话,将会在页面显示一个带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图片属性
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属性的值)

原文链接

img图片加载出错处理(转载)的更多相关文章

  1. img图片加载出错处理

    img图片加载出错处理   为了美观当网页图片不存在时不显示叉叉图片 当在页面显示的时候,万一图片被移动了位置或者丢失的话,将会在页面显示一个带X的图片,很是影响用户的体验.即使使用alt属性给出了” ...

  2. JS 实现图片的预加载(转载)

    图片预加载是web开发中一种应用相当广泛的技术,比如我们在做图片翻转显示等特效的时候,为了让图片在转换的时候不出现等待,我们最好是先让图片下载到本地,然后在继续执行后续的操作. 下面的函数实现了一个我 ...

  3. 127、Universal-Image-Loader解析(转载)(图片加载)

    (一)——ImageLoaderConfiguration的详细配置http://www.cnblogs.com/tianzhijiexian/p/4034215.html (二)——DisplayI ...

  4. ios新手开发——toast提示和旋转图片加载框

    不知不觉自学ios已经四个月了,从OC语法到app开发,过程虽然枯燥无味,但是结果还是挺有成就感的,在此分享我的ios开发之路中的小小心得~废话不多说,先上我们今天要实现的效果图: 有过一点做APP经 ...

  5. Android 框架练成 教你打造高效的图片加载框架(转)

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/41874561,本文出自:[张鸿洋的博客] 1.概述 优秀的图片加载框架不要太多, ...

  6. ImageLoader图片加载

    http://blog.csdn.net/liu1164316159/article/details/38728259       转载请注明http://write.blog.csdn.net/po ...

  7. Swift - 表格图片加载优化(拖动表格时不加载,停止时只加载当前页图片)

    列表的单元格中包含有图片在开发中很常见.通常我们可以直接在tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIn ...

  8. Android Handler 异步消息处理机制的妙用 创建强大的图片加载类(转)

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/38476887 ,本文出自[张鸿洋的博客] 最近创建了一个群,方便大家交流,群号: ...

  9. Volley 图片加载相关源码解析

    转载请标明出处: http://blog.csdn.net/lmj623565791/article/details/47721631: 本文出自:[张鸿洋的博客] 一 概述 最近在完善图片加载方面的 ...

随机推荐

  1. js 键盘码

    键盘各按键对应的数字 keycode 9 = Tab keycode 12 = Clear keycode 13 = Enter keycode 16 = Shift keycode 17 = Con ...

  2. Java 开源博客 Solo 1.8.0 发布 - 改进文件上传

    本次发布主要是更新了编辑器,使其更好地支持文件上传.(1.8.0 版本变更记录请看这里) 我们的 Markdown 编辑器: 另外,我们对 HTTPS 的支持也更完善了,欢迎大家试用! 简介 Solo ...

  3. Sharepoint 2013 Gatherer 数据库的架构版本低于此 Gatherer 应用程序支持的向后兼容的最低架构版本

    管理中心 ->升级和迁移 ->查看数据库状态 解决方法: 开始-运行(以管理员身份运行),输入如下命令. cd  C:\Program Files\Common Files\Microso ...

  4. Salesforce服务云简介

    服务云简介 Salesforce的服务云(Service Cloud)是专注于客服和呼叫中心解决方案的子系统.它是Salesforce核心CRM系统的一部分. 服务云特性 服务云提供了客户服务和呼叫中 ...

  5. Java并发编程(三)Thread类的使用

    一.线程的状态 线程从创建到最终的消亡,要经历若干个状态.一般来说,线程包括以下这几个状态:创建(new).就绪(runnable).运行(running).阻塞(blocked).time wait ...

  6. spring BeanFactory及ApplicationContext中Bean的生命周期

    spring bean 的生命周期 spring BeanFactory及ApplicationContext在读取配置文件后.实例化bean前后.设置bean的属性前后这些点都可以通过实现接口添加我 ...

  7. (网页)Http状态码大全(200、404、500等)(转CSDN)

    当我们从客户端向服务器发送请求时 服务器向我们返回状态码 状态码就是告诉我们服务器响应的状态 通过它,我们就可以知道当前请求是成功了还是出现了什么问题 状态码是由3位数字和原因短语组成的(比如最常见的 ...

  8. 【redis专题(4)】命令语法介绍之sorted_set

    有序集合可以模拟优先级队列的实现 增 zadd key score1 value1 score2 value2 .. redis 127.0.0.1:6379> zadd stu 18 lily ...

  9. ORACLE11g下如何利用SQL DEVELOPER连接上数据库

    最近在学习数据库的相关内容,在sqlplus敲了几天命令行窗口后,想尝试一下用sql developer 连接上数据库但一直没有实现.在网上查询了相关资料后现在终于弄好了,就来写下此篇博文与大家分享! ...

  10. [MapReduce_4] MapTask 并发数的决定机制

    0. 说明 介绍 && Map 个数 & Reduce 个数指定 && Map 切片计算 1. 介绍 一个 job 的 Map 阶段并行度由客户端在提交 job ...