CSS/Javascript檢測破碎的圖像，並隱藏父div

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

我需要一個JavaScript來檢測圖像是否損壞，使div高度爲0px，基本上是爲了隱藏它。還是有任何CSS來做到這一點？CSS/Javascript檢測破碎的圖像，並隱藏父div

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

    }</script>

來源

2013-12-13 Anna Boyle

通過破碎的圖像你的意思是圖像沒有找到？ – scrblnrd3

是多數民衆贊成在我的意思是 –

我明白你不能輪詢使用JS的服務器，並檢查圖像是否存在，因爲我們有服務器端語言如PHP。 – CleanX

要檢查的圖像完全加載，你可以檢查它是否完整這樣的：

$.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"; 
    } 
}

來源

2013-12-13 12:45:17 scrblnrd3

這不需要在document.ready（）中嗎？否則，它可能會在圖像加載完成之前運行javascript - OP要檢查它是否損壞，而不是它是否不完整。 – Benubird

嗨，你介意給基於給定的HTML的例子嗎？我不知道在上面的代碼中要替換什麼，謝謝 –

@AnnaBoyle應該這樣做，但我不太熟悉jQuery，所以糾正我，如果這不是如何正確找到元素。 – scrblnrd3

你正在尋找的確切代碼是這樣的：

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

img標記中的錯誤事件使其父節點div被隱藏。這應該工作。

來源

2016-09-20 11:48:12

CSS/Javascript檢測破碎的圖像，並隱藏父div

回答

相關問題