<div class="A">
<a href="abc"><img class="A" alt=" " src="/1.jpg"></a>
</div>
I need a javascript to detect if image broken,make div height to 0px,basically to hide it. Or are there any css to do it?
<script> $('.A').find('img').length == 0){
$(this).hide();
}</script>
The exact code you are searching for is something like this:
<div class="A">
<a href="abc"><img src="/1.jpg" onerror="this.parentNode.style.display='none'" class="A" alt=" " /></a>
</div>
The error event in the img tag makes its parent node div to be hidden. This should work.
To check if an image has completely loaded, you can check if it is complete like this:
$.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();
}
}
A pure JS Solution is:
document.onload=function(){
if(document.getElementById("image").complete){
console.log("complete")
}else{
document.getElementById("imgwrap").style.display="none";
}
}
