我有两个不同的图像，当点击一个按钮（来自一组六个按钮）时，它们的源被一个动画gif替换：链接到我的测试
替换这两个图像源的图像因单击的图标而异。为此，函数检查 data-selector="" 单击图标，以了解哪个动画gif应替换图像源。
两个图像放置在同一位置（使用 position: absolute )，并且他们一个接一个地替换源，而不是同时替换。他们也有自己的梦想 visibility 样式从可见切换到隐藏以及从 hidden 到 visible .
作为参考，以下是我在javascript函数中替换图像的方法：

document.getElementById("unique-icon-out").src =

它在本地总是运行得很好，但是在几次交互之后，图像开始在网上运行得很差。图像替换似乎没有及时发生，而且发生的图像也不正确。
我找不到臭虫在这里的位置。如果您能就此提出任何建议，我将不胜感激。
笔记：
所有GIF都通过css作为不可见：after伪元素的背景图像预加载。
GIF是动画的，不是静态的，所以我需要把它们放在屏幕上 <img src=""> 现在应该展示它们。
html:

<div id="unique-icon-wrapper">
  <img id="unique-icon-in" src="images/aboutus/unique/unique-one-In.gif" />
  <img id="unique-icon-out" src="" />
</div>

<div id="unique-icons">
  <a data-selector="unique-one" class="active"></a>
  <a data-selector="unique-two"></a>
  <a data-selector="unique-three"></a>
  <a data-selector="unique-four"></a>
  <a data-selector="unique-five"></a>
  <a data-selector="unique-six"></a>
</div>

javascript:

$(document).ready(function(){

      var flag = true; //flag that allows to prevent clicks while function is still running

      async function Replaceimg() {

        //if the button is not the currently active one and if there is no other animation taking place
        if ((!$(this).hasClass("active")) && (flag == true)) { 

          // disallow another click to interrupt this function while running
          flag = false;

          //image getting undrawn
          var target1 = $(this).siblings(".active").data("selector");
          var img1 = "images/aboutus/unique/"+target1+"-Out"+".gif" 

          //image getting drawn
          var target2 = $(this).data("selector"); 
          var img2 = "images/aboutus/unique/"+target2+"-In"+".gif"

          // Replace src with the animation of icon drawing OUT
          document.getElementById("unique-icon-out").src = img1;

          // Class that allows to hide the other image while the OUT animation is playing
          $("#unique-icon-wrapper").addClass("changing");

          // Highlight the correct button
          $(this).siblings().removeClass("active"); $(this).addClass("active");

          await sleep(1000); // wait until the animation finishes

          // Replace src with the animation of icon drawing IN
          document.getElementById("unique-icon-in").src = img2;

          // Remove class that hides the other image
          $("#unique-icon-wrapper").removeClass("changing");

          await sleep(1100); // wait until the animation finishes

          // leave the 2nd image empty
          document.getElementById("unique-icon-out").src = "";

          flag = true; //turn flag back to the original value

        } else {
          console.log("still running");
        }

      } /* toggleUnique function END*/

      /* run function on click */
      $("#unique-icons a").on("click", Replaceimg);

}); /* On document Ready END */