2

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.

agold
  • 6,140
  • 9
  • 38
  • 54
ganesh abh
  • 67
  • 1
  • 3
  • What have you tried? And why did they not work? See: [how to ask a good question](http://stackoverflow.com/help/how-to-ask). – agold Nov 12 '15 at 08:46
  • @ganesh, I guess we are missing code. – Rajesh Nov 12 '15 at 08:52
  • 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 Nov 12 '15 at 09:43

2 Answers2

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.

balachandar
  • 825
  • 4
  • 13
  • I am not able to access the html code, to put event code over there. – ganesh abh Nov 12 '15 at 10:23
  • Try this, put this script tag in **head** tag – balachandar Nov 12 '15 at 10:28
  • Not working ..The issue is that the content is generated dynamically hence i am not having access to the tag. I guess taht is the reason why defining function is not working as well – ganesh abh Nov 12 '15 at 11:16
  • Check this fiddle link https://jsfiddle.net/x5usds83/2/. It's working for dynamically adding image also. Please add the **onerror** method for dynamically adding image tag – balachandar Nov 12 '15 at 11:31
  • 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(""); } still m getting Uncaught TypeError: Cannot read property 'append' of null for append line – ganesh abh Nov 12 '15 at 12:26
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.

Community
  • 1
  • 1
Matthew Barnden
  • 516
  • 1
  • 6
  • 15
  • 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. – ganesh abh Nov 12 '15 at 09:24