如果图片损坏，隐藏li元素。

Question

我有一张图片列表，每个图片都被包含在一个li标签中：

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

如果图片1.jpg在DOM中不存在，我该如何隐藏整个li元素？

我找到了一些关于隐藏图片的好的JavaScript代码，并从另一个SO帖子中了解到我想要使用display:none以避免创建空行。但我不知道如何将它们结合起来。

- Chris

---

你能否在JSFiddle上整合一下这个问题的代码？ - karthikr

@karthikr 我现在就开始处理，并会在问题中编辑链接。谢谢，好主意。 - Chris

http://jsfiddle.net/H7Aq7/6/ - Chris

Answer 1

您可以使用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();
}

或者，如果您真的想让它在DOM中仿佛从未存在过，甚至可以直接将其删除：

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

如果您不想在HTML中放置onerror处理程序（唯一可靠的放置位置），那么可以最初隐藏图像，然后在运行jQuery时检查.complete，如果图像尚未完成，则安装.load()处理程序，如下所示：

CSS：

/* use some more specific selector than this */
li {display: none;}

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();
        });
    }
});

- jfriend00

---

@Chris - 我也添加了另一个解决方案，但我认为第一个更简单。 - jfriend00

Answer 2

你可以使用这个：

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

在出现错误时，处理图像，如果找不到则获取其ID并从DOM中删除

- rodrigo.gdy

Answer 3

在jQuery中，存在.error事件处理程序http://api.jquery.com/error/。

例如：

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

});

- KrishnaDhungana

---

存在几个问题。1）这只能处理第一个出错的img。2）this不是jQuery对象。3）在运行jQuery安装错误处理程序之前可能会发生错误。 - jfriend00

@jfriend00 我已经修改了它。 - KrishnaDhungana

你还没有处理第三个问题。 - jfriend00

@Chris 不用担心，伙计！ - KrishnaDhungana

Answer 4

使用jQuery，您可以设置<li>仅在<img>加载时才加载。在此处阅读更多内容。

HTML起始代码为：

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

如果它是一组中的一部分，可以给它一个类；如果它非常具体且您只想要那个，请给它一个ID；如果您想要选择页面上的所有图像，则可以选择所有图像。在我的示例中，我将使用类来将其作为一组进行选择。

jQuery：

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

基本上在图片加载完成之前它是隐藏的。

- Deryck

---

图片很可能在您附加.load()处理程序之前加载（例如，如果图像在缓存中），因此您将错过加载事件。 - jfriend00

我认为他只是想确保在没有图像的情况下不会意外加载额外的项目符号。 - Deryck

@Deryck -- 这是我的错，没有表述清楚。虽然没有项目符号，但感谢你的展示，非常有趣。 - Chris

@Deryck - 但是如果你错过了.load()事件，这很容易发生在图片被缓存的情况下，那么你将永远不会显示成功加载的图片。这是在DOM解析之后安装事件处理程序的常见问题。有些事件可能已经在你安装事件处理程序之前发生了。 - jfriend00