[HTML] img图片不存在时设置默认图片

[复制链接]
admin 发表于 2020-7-9 14:15:44 | 显示全部楼层 |阅读模式

登录后,购买下载资源更方便!

您需要 登录 才可以下载或查看,没有账号?立即注册

×
例如,有以下代码:
" D( F2 `$ q0 m- V* P- s3 y5 y) l[html] view plain copy
8 U6 t% N) e3 F+ t<img src="图片的url地址" alt="图片XX"/>  
- q0 M! h$ C) K* P! q6 c, A( M/ L& k当在页面显示的时候,万一图片被移动了位置或者丢失的话,将会在页面显示一个带X的图片,很是影响用户的体验。即使使用alt属性给出了"图片XX"的提示信息,也起不了多大作用。 其实,可以这样处理:当图片不存在的时候,会触发onerror事件,我们可以在该事件中做一下补救的工作,比如: 0 J. ]; |! U1 p! z% b  l4 h( y
1、让这个图片元素隐藏:
: o! i- ^% J8 v9 u, r2 K[html] view plain copy( S: F; L! Y0 Z, q6 L
<img src="图片的url地址" alt="图片XX"/>  + a8 |) C/ }- L9 L

9 D9 \! H4 t2 ~/ I3 _+ x- |( ]/ q2、用默认的图片替换:
+ D9 M% r- J  P& u% U, M, _; l[html] view plain copy/ t. Z- ]& z+ L" N2 s8 |) B- Y/ q
<img src="图片的url地址" alt="图片XX"/>  
  P: l8 _: z* i6 u7 R' ^" B# m注意:如果使用不当,在IE内核的浏览器下会造成死循环。比如:当【默认图片的url地址】也加载不成功(比如网速比较慢的时候)或不存在的话,就会反复的加载,最后造成堆栈溢出错误。 因此, 需要用下面两种方法解决: a、更改 onerror 代码为其它处理方式或者确保 onerror 中的默认图片足够小,并且存在。 b、控制onerror事件只触发一次,需要增加这句话:this.οnerrοr=null; 增加后如下:) i8 }$ v) [6 B  i
[html] view plain copy; Q. i+ q' l+ X. @- J: b" B" J
<img src="图片的url地址" alt="图片XX"/>  
3 ~) D: n5 n' O5 X" @( H2 q1 K' O  s% Y' _3 j8 c
经测试,上面的方法在IE各个版本及谷歌、火狐浏览器中都支持。 4 e( X* o% Q- h: U. t+ h
以上方法适合<img>较少的情况,如果要处理的<img>比较多的话,可以做一个全局性的设置:
% x( @# v; n7 i. i2 {7 ^5 n; ]可以写一个js脚本,让其遍历页面所有的<img>标签,给每个标签添加error事件,当任何地方的图片不存在时都可以进行统一的处理。- J5 U" d! S' E) ^# L- s
评论0

手机版|小黑屋|源码模版|全球支付|VISA信用卡|MASTER信用卡|科恒数字网-持续研发、集成、交付、运营方案资源库

GMT+8, 2025-7-12 16:35 , Processed in 0.050085 second(s), 24 queries , Gzip On.

Powered by Discuz! X3.5

© 2001-2025 Discuz! Team.