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

Question

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.

What have you tried? And why did they not work? See: how to ask a good question. — agold
– agold, Commented Nov 12, 2015 at 8:46
I have tried to used $("olTileImage").error(function(){ $(this).hide(); }); but this is not working , i have added .olImageLoadError { display: none !important; } in one of the css that is loading the issue seems to be fixed on first load but when i reset the page the broken images are coming again. — ganesh abh
– ganesh abh, Commented Nov 12, 2015 at 9:43

balachandar · Accepted Answer · 2015-11-12 10:22:12Z

1

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.

edited Nov 12, 2015 at 10:22

answered Nov 12, 2015 at 9:41

balachandar

8254 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

ganesh abh Over a year ago

I am not able to access the html code, to put event code over there.

balachandar Over a year ago

Try this, put this script tag <script> function testing(e) { e.style.visibility = "hidden"; } </script> in head tag

ganesh abh Over a year ago

Not working ..The issue is that the content is generated dynamically hence i am not having access to the <img src="testing" onerror="testing(this);"/> tag. I guess taht is the reason why defining function is not working as well

balachandar Over a year ago

Check this fiddle link jsfiddle.net/x5usds83/2. It's working for dynamically adding image also. Please add the onerror method for dynamically adding image tag

ganesh abh Over a year ago

In my map.js file I have added testing function like this and tried to call this via resetmap function. function testing(e) { e.style.visibility = "hidden"; } resetMap: function() { alert("testing"); $("#image").append("<img src='testing' onerror='testing(this);'/>"); } still m getting Uncaught TypeError: Cannot read property 'append' of null for append line

Community · Accepted Answer · 2017-05-23 12:23:39Z

0

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.

edited May 23, 2017 at 12:23

CommunityBot

11 silver badge

answered Nov 12, 2015 at 9:04

Matthew Barnden

5381 gold badge6 silver badges16 bronze badges

1 Comment

ganesh abh Over a year ago

The image is creating dynamically, with the the below parameters appening to the sevice url amp;VERSION=1.0.0&LAYER=actueel_zomer&STYLE=_null&TILEMATRIXSET=NLDEPSG28992Scale&TILEMATRIX=EPSG%3A28992%3A2&TILEROW=1&TILECOL=2&FORMAT=image%2Fjpeg .There is no specific image names that i can iterate through. Also, on load i am able to hide the image via css fix .olImageLoadError { display: none !important; } But when i reset the image with reset button, it broken images appear again. So need something inside my reset function to validate such scenario.

Collectives™ on Stack Overflow

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

2 Answers 2

5 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related