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 ...
随机推荐
- 洛谷P1679神奇的四次方数--DP
原题请戳>>https://www.luogu.org/problem/show?pid=1679<< 题目描述 在你的帮助下,v神终于帮同学找到了最合适的大学,接下来就要通知 ...
- cas4.2.4 登添加验证码
看了很多添加验证码的博文,唯独没有4.24的 重点看第3条,其余的和别人博文大致相同 1.首先在cas工程的web.xml增加验证码功能的支持 <!-- 验证码功能 --> &l ...
- 异步编程- async和await
使用目的 避免阻塞主线程 提高程序响应能力 C#中使用 C# 中的 Async 和 Await 关键字是异步编程的核心. 疑惑 The async and await keywords don't c ...
- 【译】第43节---EF6-自定义约定
原文:http://www.entityframeworktutorial.net/entityframework6/custom-conventions-codefirst.aspx Code-Fi ...
- HDU 3047 Zjnu Stadium(带权并查集)
http://acm.hdu.edu.cn/showproblem.php?pid=3047 题意: 给出n个座位,有m次询问,每次a,b,d表示b要在a右边d个位置处,问有几个询问是错误的. 思路: ...
- docker+jenkins实现spring boot项目持续集成自动化部署
一.首先jenkins与docker的安装参考下面链接 安装jenkins: https://www.cnblogs.com/jescs/p/7644635.html 安装docker:ht ...
- Python安装常见问题:zipimport.ZipImportError: can't decompress data; zlib not available 解决办法
centos7安装python3.7.2时,报错,解决如下 yum -y install zlib* 参考: https://blog.csdn.net/u014749862/article/deta ...
- ip字符串,二进制转十进制输出
题目: 输入: 第一行输入字符串个数n,余下几行输入ip二进制字符串 输出: 按*.*.*.*格式输出十进制ip 代码实现: package ip; import java.util.Scanner; ...
- Javascript 常用设计模式
转载自:https://blog.csdn.net/buptlyz/article/details/52018193 单例模式(模块模式):确保始终只创建一个实例的对象时使用的设计模式. 为什么需要采 ...
- C++的虚函数
1 多态产生的背景 希望同一个方法在派生类和基类中的行为是不同的,换句话来说,方法的行为取决于调用该方法的对象. 2 解决多态的两种方法 1)在派生类中重新定义基类的方法 2)使用虚方法 3 虚 ...