Question

我想要隐藏下面代码中已破坏的图像。问题是我无法访问html代码，因为它是动态生成的，因此只需要在JS中进行。

我是Jquery的新人。你能帮忙吗？这是生成的代码。

<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>

我尝试了多种解决方案，但没有多大帮助。

Answer 1

如果您使用JS加载图像，那么您可以尝试这里给出的方法How to detect if the image path is valid?，如果不是，您可以遍历图像并使用这种方法，可能首先在此示例中填充图像路径数组抓住父div中的所有图像源。

Answer 2

使用 onerror 方法我们可以做到这一点。

请尝试以下代码

<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

希望这会对你有所帮助。

当动态生成内容时，如何在jquery / Javascript中隐藏损坏的图像

2 个答案: