A-A+

图片不存在时显示一个默认的图片

2016年02月19日 web前端设计 暂无评论 阅读 6 views 次

图片不存在时显示一个默认的图片实现方法,一般情况下我们是没有图片就是程序判断加个判断图片,如果没有加我们可以使用其它办法来解决,有需要的朋友可参考参考.

img标签src对应的图片不存在,显示一个默认的图片.

最简单的方法,代码如下:

  1. <img src="abc.JPG" onerror="this.src='default.JPG'" />  

但这个方法有一个弊端,就是当default.jpg也不存在时,网页就会死循环.

JS代码如下:

  1. function imgError(obj){  
  2. obj.src='/error/images/filmthum_err.gif';  
  3. obj.onerror = null;//控制onerror事件只触发一次  
  4. }  
  5. function imgLoading(obj) {  
  6. obj.nextSibling.style.display='none';  
  7. obj.style.display='block';  
  8. }  

HTML代码如下:

  1. <img src="${Image}" onerror="imgError(this);" alt="${imgName}" onload"imgLoading(this);"/><div> loading... </div>  

CSS代码如下:

  1. img {  
  2. border1px solid #CFCFCF;  
  3. overflowhidden;  
  4. height141px;  
  5. padding2px;  
  6. width115px;  
  7. display:none;  
  8. }  
  9. .imgLoading {  
  10. border1px solid #CFCFCF;  
  11. height141px;  
  12. overflowhidden;  
  13. padding2px;  
  14. width115px;  
  15. backgroundurl('/images/loading.gif') center center no-repeat;  
  16. displayblock;  
  17. }  
标签:

给我留言