如果图像损坏,请隐藏li

Question

我有一个图像列表,其中每个图像都包裹在li中:

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

如果图像1.jpg被打破就好像它从未存在于DOM中,我怎么能隐藏整个li？

我找到了一些关于如何隐藏图像并从我想要的另一个SO帖子中学到的好js ,display:none所以我没有创建一个空行.但是我把这些放在一起很麻烦.

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

如果您不想onerror在HTML中放置处理程序(您可以放置​​它的唯一可靠位置),那么您可以最初隐藏图像,然后检查.completejQuery何时运行以及图像是否尚未完成,然后安装.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();
        });
    }
});