Javascript 如果图像损坏，则隐藏li

我有一个图像列表，其中每个图像都用li包装：

<li><a href='http://www.so.com'><img src='http://www.so.com/1.jpg'></a></li>

如果image 1.jpg被破坏，就好像它在DOM中不存在一样，我如何隐藏整个li

---

我找到了一些关于如何显示的好js，并从中了解到我想要显示：无，所以我不会创建空行。但是我很难把这些放在一起

您可以对图像使用

onerror

处理程序：

<li><a href='http://www.so.com'>
<img src='http://www.so.com/1.jpg' onerror='hideContainer(this)'>
</a></li>

// this function must be in the global scope
function hideContainer(el) {
    $(el).closest("li").hide();
}

---

如果您不想将

onerror

处理程序放入HTML（唯一可靠的放置位置），则可以先隐藏图像，然后在运行jQuery时选中

.complete

，如果图像尚未完成，则安装

.load（）

处理程序，如下所示：

CSS:

jQuery：

$("li img").each(function() {
    if (this.complete) {
        // img already loaded successfully, show it
        $(this).closest("li").show();
    } else {
        // not loaded yet so install a .load handler to see if it loads
        $(this).load(function() {
            // loaded successfully so show it
            $(this).closest("li").show();
        });
    }
});

<li style="display: none;"><a href='http://www.so.com'><img src='http://www.so.com/1.jpg' id="imgOne" class="imgSet"></a></li>

---

在jQuery中有.error事件处理程序

例如：

$('img').error(function(event) {
   $(this).closest('li').hide();     

});

---

使用jQuery，您可以将

设置为仅在

加载时加载

HTML的开头为：

在图像加载之前，它基本上是隐藏的。

您可以使用以下方法：

$('.imgSet').load(function() {
    $(this).parents('li').show();
});

---

错误时处理图像，如果找不到，则获取其id并将其从DOM中删除

您能否整理出此问题的JSFIDLE？@karthikr将立即着手处理此问题，并使用链接编辑问题。谢谢，好主意。这有几个问题。1） 这将只处理第一个有错误的img。2）

此

不是jQuery对象。3） 在您运行jQuery安装错误处理程序之前，可能会发生错误。@jfriend00我已经修改了它。您还没有处理第三个问题。@Chris别担心，伙计！在附加

.load（）

处理程序之前，很可能会加载映像（比如映像在缓存中），因此您可能会错过加载事件。我认为他只是想确保在没有任何问题的情况下不会意外加载额外的要点image@Deryck这是我不够清楚的过错。这里没有要点，但是感谢您展示这一点，非常有趣。@Deryck-但是如果您错过了

.load（）

事件（如果图像被缓存很容易完成），那么您将永远不会显示成功加载的图像。这是在解析DOM后安装事件处理程序的常见问题。在您准备好事件处理程序之前，可能已经发生了一些事件。@Chris-我还添加了另一个解决方案，但我认为第一个更简单。

<li style="display: none;"><a href='http://www.so.com'><img src='http://www.so.com/1.jpg' id="imgOne" class="imgSet"></a></li>

$('.imgSet').load(function() {
    $(this).parents('li').show();
});

<img id='any' src="https://invalid.com" onerror="document.getElementById(this.id).remove()" >