如果一个图像可用，则隐藏多个图像

Question

我有一个页面只需要显示一张图片，但图片可以来自不同的来源。

我已经列出了所有可能的来源和错误，如果图像不是来自该来源，它将被隐藏。问题是有时在 2 甚至 3 个 src 中可以找到相同的图像，因此没有运行 onerror 函数并且在页面上显示相同的图像 2 或 3 次（相同的图像但不同的来源）

我需要的是一个 js 脚本，如果其中一个图像正在工作，它会隐藏其余图像，但是有很多可能性，例如：img_01 与 img_4 一起显示或img_2 与 img_3 或 img_01 与 img_2 和 img_3。我不知道如何涵盖所有这些可能性，所以这就是为什么我需要你的帮助。

希望你能理解我的问题

谢谢！ :)

<div class="col-md-12" style="padding: 0px; margin-bottom: 20px;">
                                    <img id="img_01" src="im/wall/<?php                
                                                if(isset($_GET['i']) && strlen($_GET['i']) > 0){
                                                echo $_GET['i'];
                                                }?>.jpg"  
                                                onerror="this.style.display='none'"/>

                                    <img id="img_2" src="im/ceiling/<?php                
                                                if(isset($_GET['i']) && strlen($_GET['i']) > 0){
                                                echo $_GET['i'];
                                                }?>.jpg"  
                                                onerror="this.style.display='none'"/>

                                    <img id="img_3" src="im/floor/<?php                
                                                if(isset($_GET['i']) && strlen($_GET['i']) > 0){
                                                echo $_GET['i'];
                                                }?>.jpg"  
                                                onerror="this.style.display='none'"/>
                                    <img id="img_4" src="im/collections/<?php                
                                                if(isset($_GET['i']) && strlen($_GET['i']) > 0){
                                                echo $_GET['i'];
                                                }?>.jpg"  
                                                onerror="this.style.display='none'"/>                           
                            </div>

我用过类似的东西，我什至试着把它放在所有图片的 if 中

$('#img_01').on('load', function(){
// hide/remove the loading image
$('#img_2, #img_3, #img_4').hide();

Answer 1

const my_imgs = document.getElementsByClassName('my_img');

const handler = function(e){
  remove_handler();
  e.target.classList.remove('hidden');
}

const remove_handler = function(){
  for(let i=my_imgs.length; i--; ) {
    my_imgs[i].removeEventListener('load', handler);
  }
}

for(let i=my_imgs.length; i--;){
  my_imgs[i].addEventListener('load', handler);
}

.my_img {
  width:200px;
}
.hidden {
  display:none;
}

<div class="container">
  <img class="my_img hidden" src="https://cdn.stocksnap.io/img-thumbs/960w/TWTNM0XMX9.jpg">
  <img class="my_img hidden" src="https://cdn.stocksnap.io/img-thumbs/960w/L6QLZEGPXB.jpg">
  <img class="my_img hidden" src="https://cdn.stocksnap.io/img-thumbs/960w/FH3TLO40EI.jpg">
</div>

如果一个图像可用，则隐藏多个图像

Multiple image hidding if one image is available

html

javascript

jquery

image

show-hide