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

当在页面显示的时候,万一图片被移动了位置或者丢失的话,将会在页面显示一个带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标签设置默认图片的更多相关文章

  1. img标签使用默认图片的一种方式

    基于html5提供的onerror这个时间属性.

  2. 微信小程序开发——设置默认图片、错误加载图片

    小程序不支持h5中的onerrorimg,只开放了binderror属性,当错误发生时,会发布到 AppService,事件对象event.detail = {errMsg: 'something w ...

  3. img图片不存在时设置默认图片

    当在页面显示的时候,万一图片被移动了位置或者丢失的话,将会在页面显示一个带X的图片,很是影响用户的体验.即使使用alt属性给出了"图片XX"的提示信息,也起不了多大作用. 其实,可 ...

  4. html select 标签设置默认选中

    方法有两种. 第一种通过<select>的属性来设置选中项,此方法可以在动态语言如php在后台根据需要控制输出结果. 1 2 3 4 5 < select  id =  " ...

  5. img设置默认图片最简单的解决方法

    <img src='图片的路径' onerror='this.src="如果图片不存在,则使用该图片"' 这个解决方法除了简单外,还有一个优点. 就是当你不知道图片是否存在, ...

  6. js解决img标签加载失败显示默认图片

    问题: 为所有显示楼盘的页面添加一个加载失败的默认图片. 基本思路: img标签中有个onerror属性,专门用来处理加载失败的事件.所以可以用jquery添加onerror属性,在onerror中加 ...

  7. HTML中的<select>标签如何设置默认选中的选项

    方法有两种. 第一种通过<select>的属性来设置选中项,此方法可以在动态语言如php在后台根据需要控制输出结果. 1 2 3 4 5 < select  id =  " ...

  8. js处理img标签加载图片失败,显示默认图片

    1.第一种方法: 如果已经引入了jquery插件,就很好办.没有的话,如果实在需要,可以附上代码: script(type='text/javascript', src="http://aj ...

  9. 设置Input标签Date默认值为当前时间

    需求:想设置Imput标签Date默认值为当前时间,通过JavaScript实现. <html> ...... <body> <input type="date ...

随机推荐

  1. P2120 [ZJOI2007]仓库建设(dp+斜率优化)

    思路 首先暴力DP显然,可以得20分 加上一个前缀和优化,可以得到40分 然后上斜率优化 设\(sum_i\)为\(\sum_{1}^iP_i\),\(sump_i\)为\(\sum_{1}^{i}P ...

  2. 【Hadoop 分布式部署 七: 使用ntp配置内网中集群机器时间同步 】

    集群的时间要同步,如果时间不同步,会出现很多问题. 找一台机器做时间服务器 所有的机器与这台机器的时间进行定时的同步 比如,每日十分钟同步一次 我们这里使用  hadoop-senior.zuoyan ...

  3. HDU 5726 GCD(RMQ+二分)

    http://acm.split.hdu.edu.cn/showproblem.php?pid=5726 题意:给出一串数字,现在有多次询问,每次询问输出(l,r)范围内所有数的gcd值,并且输出有多 ...

  4. JAVA怎样理解面向对象

    一.对象   现实世界中,随处可见的一种事物就是对象,对象是事物存在的实体,如人类.书桌.计算机.高楼大厦等.人类解决问题的方式总是将复杂的事物简单化,于是就会思考这些对象都是由哪些部分组成的.通常都 ...

  5. JAVA9新特性——JShell使用笔记

    前言:JShell是java 9的新特性之一,由于在之前学校java8的lambda表达式的时候,就希望有这么一个可以交互的界面来快速响应编写的代码.刚好java9出来了,就对它把玩起来了... 内容 ...

  6. idea使用教程(2)

    目录: 1. open和import的区别 2.修改虚拟机配置信息 3.安装目录和设置目录 1. open和import的区别 open:如果本身就是idea项目,则可以直接open打开; impor ...

  7. 认识flask框架-2

    1.json:基于键值对的字符串,轻量级的数据交互格式,用来传输数据 2.json模块 dumps:把字典转化成json字符串. loads:把json字符串转成字典. dump.load操作的是文件 ...

  8. MYSQL常用函数(聚合函数(常用于GROUP BY从句的SELECT查询中))

    AVG(col)返回指定列的平均值 COUNT(col)返回指定列中非NULL值的个数 MIN(col)返回指定列的最小值 MAX(col)返回指定列的最大值 SUM(col)返回指定列的所有值之和 ...

  9. Ubuntu16.04 上安装MySQL5.7

    Ubuntu版本:16.04.4 1.先更新最新的源 sudo apt-get update 2.查看是否已经安装过mysql sudo netstat -tap | grep mysq 如果没有安装 ...

  10. Python全栈开发-Day7-面向对象编程2

    本节内容: 1.面向对象高级语法部分 1)静态方法.类方法.属性方法 3)类的特殊方法 4)反射 2.异常处理 3.动态导入模块 静态方法 通过@staticmethod装饰器即可把其装饰的方法变为一 ...