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

当在页面显示的时候,万一图片被移动了位置或者丢失的话,将会在页面显示一个带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. CF776B Sherlock and his girlfriend

    题目地址 题目链接 题解 这题很有意思啊qwq.本来是写算出每个数的质约数的,然后写到一半发现,质约数互相不影响,有质约数的数肯定是合数. 所以合数染一种色,质数染一种色就好 #include < ...

  2. 题解——UVA11997 K Smallest Sums

    题面 背景 输入 输出 翻译(渣自翻) 给定K个包含K个数字的表,要求将其能产生的\( k^{k} \)个值中最小的K个输出出来 题解 k路归并问题的经典问题 可以转化为二路归并问题求解 考虑A[], ...

  3. js数组常用方法,含es5

    (1)基本的数组方法 1.join() Array.join()方法将数组中所有元素都转化为字符串并连接在一起,返回最后生成的字符串.可以自己指定分隔的符号,如果不指定,默认使用逗号 var arr ...

  4. Aviutl 视频处理软件

    素材类:No.009 倒放(Video)         http://www.bilibili.com/video/av3078207/ No.010 倒放(Object)         http ...

  5. FB01与F-02的区别(转载)

    FB01与F-02的区别(转载) FB01 : a) ''Post Document'' b) No doc type as SA automatically comes. c) No automat ...

  6. python中while循环运算符及格式化输出

    一,while循环 while 条件: while语句块(循环体) 运行: 判断你给的条件是否为真,如果真则执行循环体.否则跳出循环. 执行完循环体之后再次判断条件是否为真 例子1 我们玩联盟的时候喷 ...

  7. 3.1 vue组件的使用

    1. 组件 组件: 组件是一个局部功能界面,它包含了所有要实现这个功能界面的相关资源,如css.html等. 组件化编程: vue文件包含3个部分 <template> <div&g ...

  8. 手动添加jar包到maven仓库

    引言: 虽然配置了maven以后可以通过索引的方式自动下载jar包到本地maven仓库,从而使项目中直接使用本地仓库里面的架包, 但是这一招并不是每一次都灵应,也有遇到了失败的时候,当遇到失败的时候, ...

  9. 使用cmd命令进行导入

    进入cmd直接输入命令 imp 用户名/密码@监听器路径/数据库实例名称 file='d:\数据库文件.dmp' full=y ignore=y 例如: imp mislogin/mislogin@l ...

  10. vue自定义错误界面

    方案一: 当输入错误链接错误或者找不到页面,在router里可以定义一个404页面,具体可以这样做:在routes里面这样写: { path:'*', component:error, name:'e ...