Question

<div class="A">
   <a href="abc"><img class="A" alt=" " src="/1.jpg"></a>
</div>

我需要一个javascript来检测图像是否破碎，使div高度为0px，基本上是为了隐藏它。或者有没有css可以做到这一点？

<script> $('.A').find('img').length == 0){
       $(this).hide();

    }</script>

Answer 1

要检查图像是否已完全加载，您可以检查它是否完整，如下所示：

$.ready(function(){
    //I'm guessing that's how find() works, correct me if I'm wrong
    if($('.A').find("img")[0].complete){

            console.log("successfully loaded!")
      }else{
           $('.A').find("div")[0].hide();
      }
}

纯JS解决方案是：

document.onload=function(){
    if(document.getElementById("image").complete){
        console.log("complete")
    }else{
        document.getElementById("imgwrap").style.display="none";
    }
}

Answer 2

您要搜索的确切代码如下：

<div class="A">
    <a href="abc"><img src="/1.jpg" onerror="this.parentNode.style.display='none'" class="A" alt=" " /></a>
</div>

img标记中的错误事件使其父节点div被隐藏。这应该有用。

CSS / Javascript检测损坏的图像，并隐藏父div

2 个答案: