博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
网页图片不存在时不显示默认图片
阅读量:6555 次
发布时间:2019-06-24

本文共 700 字,大约阅读时间需要 2 分钟。

hot3.png

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

其实,可以这样处理:当图片不存在的时候,会触发onerror事件,我们可以在该事件中做一下补救的工作,比如:

1、让这个图片元素隐藏:

<img src="图片的url地址" alt="图片XX" οnerrοr="this.style.display='none'"/>

2、用默认的图片替换:

<img src="图片的url地址" alt="图片XX" οnerrοr="this.src='默认图片的url地址'"/>

注意:如果使用不当,在IE内核的浏览器下会造成死循环。比如:当【默认图片的url地址】也加载不成功(比如网速比较慢的时候)或不存在的话,就会反复的加载,最后造成堆栈溢出错误。

因此, 需要用下面两种方法解决:

a、更改 onerror 代码为其它处理方式或者确保 onerror 中的默认图片足够小,并且存在。

b、控制onerror事件只触发一次(如果默认图片加载也有问题会导致事件一直触发),需要增加这句话:this.οnerrοr=null; 增加后如下:

<img src="图片的url地址" alt="图片XX" οnerrοr="this.src='默认图片的url地址;this.οnerrοr=null'"/>

经测试,上面的方法在IE各个版本及谷歌、火狐浏览器中都支持。

 

转载于:https://my.oschina.net/icandoitbetter/blog/3027803

你可能感兴趣的文章
python基础学习笔记(十三)
查看>>
背景图片的知识点
查看>>
[你必须知道的.NET]第十七回:貌合神离:覆写和重载
查看>>
linux extract rar files
查看>>
用CS的思维可以指导BS的项目吗?
查看>>
Knockout.Js官网学习(监控属性Observables)
查看>>
ORA-12514: TNS: 监听程序当前无法识别连接描述符中请求的服务解决
查看>>
windows phone 了解LinearGradientBrush类和RadialGradienBrush类(11)
查看>>
敏捷开发中的Scrum流程和术语【转】
查看>>
azure之MSSQL服务性能测试
查看>>
公众平台安全中心新增运营者微信号个数为四个 支持多人管理
查看>>
Android BitmapFactory.Options
查看>>
前端构建:Less入了个门
查看>>
Hibernate 自动生成数据库表
查看>>
phonegap(cordova) 自己定义插件代码篇(三)----支付宝支付工具整合
查看>>
牛客网Java刷题知识点之构造函数是什么、一般函数和构造函数什么区别呢、构造函数的重载、构造函数的内存图解...
查看>>
博客更名为 健哥的数据花园
查看>>
linux 批量进行:解压缩某一类压缩文件类型的文件
查看>>
ubuntu,CentOS永久修改主机名
查看>>
激活modelsim se 10.4 时运行patch_dll.bat不能生成TXT
查看>>