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标签设置默认图片的更多相关文章
- img标签使用默认图片的一种方式
基于html5提供的onerror这个时间属性.
- 微信小程序开发——设置默认图片、错误加载图片
小程序不支持h5中的onerrorimg,只开放了binderror属性,当错误发生时,会发布到 AppService,事件对象event.detail = {errMsg: 'something w ...
- img图片不存在时设置默认图片
当在页面显示的时候,万一图片被移动了位置或者丢失的话,将会在页面显示一个带X的图片,很是影响用户的体验.即使使用alt属性给出了"图片XX"的提示信息,也起不了多大作用. 其实,可 ...
- html select 标签设置默认选中
方法有两种. 第一种通过<select>的属性来设置选中项,此方法可以在动态语言如php在后台根据需要控制输出结果. 1 2 3 4 5 < select id = " ...
- img设置默认图片最简单的解决方法
<img src='图片的路径' onerror='this.src="如果图片不存在,则使用该图片"' 这个解决方法除了简单外,还有一个优点. 就是当你不知道图片是否存在, ...
- js解决img标签加载失败显示默认图片
问题: 为所有显示楼盘的页面添加一个加载失败的默认图片. 基本思路: img标签中有个onerror属性,专门用来处理加载失败的事件.所以可以用jquery添加onerror属性,在onerror中加 ...
- HTML中的<select>标签如何设置默认选中的选项
方法有两种. 第一种通过<select>的属性来设置选中项,此方法可以在动态语言如php在后台根据需要控制输出结果. 1 2 3 4 5 < select id = " ...
- js处理img标签加载图片失败,显示默认图片
1.第一种方法: 如果已经引入了jquery插件,就很好办.没有的话,如果实在需要,可以附上代码: script(type='text/javascript', src="http://aj ...
- 设置Input标签Date默认值为当前时间
需求:想设置Imput标签Date默认值为当前时间,通过JavaScript实现. <html> ...... <body> <input type="date ...
随机推荐
- String comparison is too slow in R language
## String comparison is too slow in R language ## it will take 3 minutes, it is too slow date() strA ...
- 说明Heap与stack的差别。
Heap 是堆,Stack 是栈. 栈与堆都是Java用来在Ram中存放数据的地方,与C++不同,Java会自动管理栈与堆,程序员不能直接设置栈与堆. Java的堆是一个运行时的数据区,类的对象从中分 ...
- sap hana 数据库 EBS
SAP实时数据平台详解 ************************************************************ EBS是Oracle 公司对原有应用产品整合后的一个产 ...
- jQuery从0到1
jQuery不需要安装,把下载的jquery.js文件放在网站上的一个公共的位置,需要在某个页面使用jQuery时,再相对引用即可.——其中有压缩版和未压缩版,分别用于开发和发布.http://jqu ...
- 【BZOJ】1831: [AHOI2008]逆序对
题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=1831 考虑$-1$的位置上填写的数字一定是不降的. 令${f[i][j]}$表示$DP$到 ...
- Codeforces 769D k-Интересные пары чисел
题目链接:http://codeforces.com/contest/769/problem/D 搜索题 考虑这些数的值域较小,直接${O(2^{k})}$次方枚举每个数字二进制位上是否改变,剪枝一下 ...
- hiho #1196 : 高斯消元·二
#1196 : 高斯消元·二 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 在上一回中,小Hi和小Ho趁着便利店打折,买了一大堆零食.当他们结账后,看到便利店门口还有其 ...
- live2d+cocos2dx示例工程
环境 : win10 64bit visual studio 2013 cocos2d-x-3.9 Live2D_SDK_OpenGL_2.0.06_2_sample_3.3_en 首先安装visua ...
- 2.0 vue内置指令与自定义指令
1.1 常用内置指令 1) v:text : 更新元素的 textContent 2) v-html : 更新元素的 innerHTML 3) v-if : 如果为 true, 当前标签才会输出到页 ...
- Spring重要注解@ControllerAdvice
@ControllerAdvice是一个@Component,用于定义@ExceptionHandler,@InitBinder和@ModelAttribute方法,适用于所有使用@RequestMa ...