CSS / Javascript檢測破損圖像並隱藏父div

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標簽中的error事件使其父節點div被隱藏。 這應該工作。