Question

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

我已经放置了所有可能的来源和错误，如果图像不是来自该来源，则会被隐藏。问题是，有时可以在2或甚至3个srcs中找到相同的图像，因此不会运行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 for all图像

中

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

Answer 1

＆＃13;

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);
}

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: