首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何在找不到源镜像时静默隐藏“找不到镜像”图标

如何在找不到源镜像时静默隐藏“找不到镜像”图标
EN

Stack Overflow用户
提问于 2010-07-13 17:42:47
回答 8查看 90.5K关注 0票数 94

您是否知道当未找到图像文件时,如何在呈现的HTML页面中隐藏经典的“找不到图像”图标?

有没有使用JavaScript/jQuery/CSS的工作方法?

EN

回答 8

Stack Overflow用户

回答已采纳

发布于 2010-07-13 17:49:35

您可以使用JavaScript中的onerror事件在图像加载失败时执行操作:

代码语言:javascript
复制
var img = document.getElementById("myImg");
img.onerror = function () { 
    this.style.display = "none";
}

在jQuery中(既然你问了):

代码语言:javascript
复制
$("#myImg").error(function () { 
    $(this).hide(); 
});

或者对于所有图像:

代码语言:javascript
复制
$("img").error(function () { 
    $(this).hide();
    // or $(this).css({visibility:"hidden"}); 
});

如果隐藏图像可能会更改布局,则应使用visibility: hidden而不是.hide()。web上的许多站点使用默认的“无图像”图像,当指定的图像位置不可用时,将src属性指向该图像。

票数 103
EN

Stack Overflow用户

发布于 2010-07-13 18:12:59

代码语言:javascript
复制
<img onerror='this.style.display = "none"'>
票数 117
EN

Stack Overflow用户

发布于 2016-04-20 18:49:59

我稍微修改了Gary Willoughby建议的解决方案,因为它简单地显示了破碎的图像图标。我的解决方案是:

代码语言:javascript
复制
    <img src="..." style="display: none" onload="this.style.display=''">

在我的解决方案中,图像最初是隐藏的,只有在成功加载时才会显示。它有一个缺点:用户看不到半身化的图像。如果用户禁用了JS,那么他们将永远不会看到任何图像

票数 12
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/3235913

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档