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图片属性
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图片加载出错处理(转载)的更多相关文章
- img图片加载出错处理
img图片加载出错处理 为了美观当网页图片不存在时不显示叉叉图片 当在页面显示的时候,万一图片被移动了位置或者丢失的话,将会在页面显示一个带X的图片,很是影响用户的体验.即使使用alt属性给出了” ...
- JS 实现图片的预加载(转载)
图片预加载是web开发中一种应用相当广泛的技术,比如我们在做图片翻转显示等特效的时候,为了让图片在转换的时候不出现等待,我们最好是先让图片下载到本地,然后在继续执行后续的操作. 下面的函数实现了一个我 ...
- 127、Universal-Image-Loader解析(转载)(图片加载)
(一)——ImageLoaderConfiguration的详细配置http://www.cnblogs.com/tianzhijiexian/p/4034215.html (二)——DisplayI ...
- ios新手开发——toast提示和旋转图片加载框
不知不觉自学ios已经四个月了,从OC语法到app开发,过程虽然枯燥无味,但是结果还是挺有成就感的,在此分享我的ios开发之路中的小小心得~废话不多说,先上我们今天要实现的效果图: 有过一点做APP经 ...
- Android 框架练成 教你打造高效的图片加载框架(转)
转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/41874561,本文出自:[张鸿洋的博客] 1.概述 优秀的图片加载框架不要太多, ...
- ImageLoader图片加载
http://blog.csdn.net/liu1164316159/article/details/38728259 转载请注明http://write.blog.csdn.net/po ...
- Swift - 表格图片加载优化(拖动表格时不加载,停止时只加载当前页图片)
列表的单元格中包含有图片在开发中很常见.通常我们可以直接在tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIn ...
- Android Handler 异步消息处理机制的妙用 创建强大的图片加载类(转)
转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/38476887 ,本文出自[张鸿洋的博客] 最近创建了一个群,方便大家交流,群号: ...
- Volley 图片加载相关源码解析
转载请标明出处: http://blog.csdn.net/lmj623565791/article/details/47721631: 本文出自:[张鸿洋的博客] 一 概述 最近在完善图片加载方面的 ...
随机推荐
- js识别设备
console.log(window.navigator); Navigator 对象属性 appCodeName 返回浏览器的代码名. appMinorVer ...
- 伪类选择器 E:nth-child(n)、E:nth-of-type(n)
结构伪类是css3新增的类型选择器. E:nth-child(n).E:nth-of-type(n)就是其中之二.搞懂了这两个,基本上跟他俩一家的其他几个兄弟伙基本上也可以弄懂了. 首先先用文字语言来 ...
- LeetCode题解之 Find Mode in Binary Search Tree
1.题目描述 2.问题分析 使用map记录元素出现的次数. 3.代码 vector<int> v; map<int,int> m; vector<int> find ...
- 07-OpenLDAP密码审计
OpenLDAP密码审计 阅读视图 密码审计的作用 操作实践 1. 密码审计的作用 开启密码审计的功能主要用于记录OpenLDAP用户修改密码,以及密码审计. 2. 操作实践 开启密码审计模块并配置密 ...
- linux服务器系统盘坏且系统盘为软raid的修复方法
1 需要换新盘的情况 1.1 一块盘grub损坏修复 一块盘grub损坏修复(可通过另一块盘进入系统的情况).更换硬盘的方式,可以热插拔,也可以服务器断电后更换,但如果是热插拔,可能会导致盘符变更.坏 ...
- C#生成真值表
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...
- debian 7.4 安装配置
改用debian差不多有半年了,之前一直用fedora,大概3年多,虽然软件包都很新,总是不太稳定,有点软件用着用着就自动退出了. 换了debain之后,这半年还真是一直没啥问题,这里总结了一些安装配 ...
- GsonUtil工具类
import java.util.ArrayList; import java.util.List; import java.util.Map; import com.google.gson.Gson ...
- MATLAB三维作图——隐函数
MATLAB三维作图——隐函数 作者:凯鲁嘎吉 - 博客园http://www.cnblogs.com/kailugaji/ 对于三维隐函数,没有显式表达式,无法通过Matlab现成的3-D画图函数 ...
- asp.net core 中使用StyleCop.StyleCopAnalyzers
1.nuget中安装 StyleCop.Analyzers 当前版本1.1.0-beta004 2.在项目根目录新增 stylecop.json文件 { "settings": { ...