CODEWITHSUNDEEP
javascriptjqueryhtmlcssimage
ganesh abh
ganesh abh

Reputation: 67

How to hide the broken images in jquery/Javascript when content is generate dynamically

I want to hide the images which are broken in the code below. The issue is that i not having access to the html code as it is getting generated dynamically so need to do it in JS only.

I am newbee in Jquery. Can you please help. Here is the code that is being generated. 

<div id="Layer.WMTS_68" dir="ltr" class="olLayerDiv olLayerGrid" style="position: absolute; width: 100%; height: 100%; z-index: 105; display: block; left: 0%; top: 0%;">

<img class="olTileImage" src="working image url" style="visibility: inherit; opacity: 1; position: absolute; left: 281%; top: 51%; width: 256%; height: 256%;">
<img class="olTileImage" src=" working image url" style="visibility: inherit; opacity: 1; position: absolute; left: 281%; top: 307%; width: 256%; height: 256%;">
<img class="olTileImage" src="broken image url" style="visibility: inherit; opacity: 1; position: absolute; left: 537%; top: 51%; width: 256%; height: 256%;">
<img class="olTileImage" src="broken image url" style="visibility: inherit; opacity: 1; position: absolute; left: 537%; top: 307%; width: 256%; height: 256%;">
<img class="olTileImage" src="broken image url" style="visibility: inherit; opacity: 1; position: absolute; left: 281%; top: 563%; width: 256%; height: 256%;">
<img class="olTileImage" src="broken image url" style="visibility: inherit; opacity: 1; position: absolute; left: 537%; top: 563%; width: 256%; height: 256%;"></div>

I have tried multiple solution but not helping much.

Upvotes: 2

Views: 484

Answers (2)

balachandar
balachandar

Reputation: 825

Using onerror method we can achieve this.

Please try below code

<img src="testing" onerror="testing(this);"/>
<img class="olTileImage" onerror="testing(this);" src="broken image url" style="visibility: inherit; opacity: 1; position: absolute; left: 281%; top: 51%; width: 256%; height: 256%;">
<script>
function testing(e)
{
   e.style.visibility = "hidden";
}
</script>

Fiddle

Hope this will help you.

Upvotes: 1

Matthew Barnden
Matthew Barnden

Reputation: 538

If you loading your images with JS then you could try the approach given here How to detect if the image path is valid?, if not you could loop through your images and use some of this approach, maybe first populate the image paths array in this example by grabbing all the image souces inside the parent div.

Upvotes: 0

Related Questions