img图片加载出错处理[通俗易懂]

img图片加载出错处理[通俗易懂]为了美观当网页图片不存在时不显示叉叉图片当在页面显示的时候,万一图片被移动了位置或者丢失的话,将会在页面显示一个带X的图片,很是影响用户的体验。即使使用alt属性给出了”图片XX”的提示信息,也起不了多大作用。其实,可以这样处理:当图片不存在的时候,会触发onerror事件,我们可以在该事件中做一下补救的工作,比如:1、让这个图片元素隐藏:imgsrc=”图片的url地址”

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

为了美观当网页图片不存在时不显示叉叉图片

当在页面显示的时候,万一图片被移动了位置或者丢失的话,将会在页面显示一个带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属性的值)
复制代码

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/158916.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • AFNetworking框架_上传文件或图像server

    AFNetworking框架_上传文件或图像server

  • k8s 资源管理_pod容器间调用命令

    k8s 资源管理_pod容器间调用命令k8s管理器介绍yaml资源管理器介绍管理器介绍在Kubernetes中,所有的内容都抽象为资源,用户需要通过操作资源来管理Kubernetes。Kubernetes的本质就是一个集群系统,用户可以在集群中部署各种服务。所谓的部署服务,其实就是在Kubernetes集群中运行一个个的容器,并将指定的程序跑在容器中。Kubernetes的最小管理单元是Pod而不是容器,所以只能将容器放在Pod中,而Kubernetes一般也不会直接管理Pod,而是通过Pod控制器来管理Pod的。Pod提供服务之后

  • DOS中Copy命令合并文件[通俗易懂]

    DOS中Copy命令合并文件[通俗易懂]今天在查找DOS中合并文件的命令时,发现使用该命令还可以在有些情况下加密一些帐户信息,遂转。OriginalURL: http://hi.baidu.com/leland/item/a55f753f60a61480b611dbf0我们都知道DOS中Copy命令的主要作用是复制文件,它还有一个作用是合并文件。一般情况下,它主要用于合并相同类型的文件,比如将两个文本文件合并为一个文本

  • Homebrew新一代OS X套件管理工具 高速安装Git[通俗易懂]

    Homebrew新一代OS X套件管理工具 高速安装Git

  • padStart()与padEnd()「建议收藏」

    padStart()与padEnd()「建议收藏」padStart()padStart()方法用另一个字符串填充当前字符串(如果需要的话,会重复多次),以便产生的字符串达到给定的长度。从当前字符串的左侧开始填充。语法str.padStart(targetLength[,padString])参数:targetLength:当前字符串需要填充到的目标长度。如果这个数值小于当前字符串的长度,则返回当前字符串本身。padString:可选填充字符串。如果字符串太长,使填充后的字符串长度超过了目标长度,则只保留最左侧的部分,其他部分会被截

  • Avada kedavra_用回溯法解N皇后问题

    Avada kedavra_用回溯法解N皇后问题hdu2553N皇后问题

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号