如何延迟 onClick 图像 link 以便 .gif 动画可以在页面切换之前完成？

Question

我有一个 .gif 动画，它会更改为新的 .gif 图像源 onClick，并且 links onClick 到另一个页面。我只是想弄清楚如何延迟 link 以便第二个 .gif 动画在切换页面之前完成。我该怎么做？

我当前的代码（当您 运行 片段时 link 不会加载，但它在实际站点上有效）；

<img src="https://lowlifeclothing.co/wp-content/uploads/2020/11/Loop12.gif" onclick="location.href = 'https://lowlifeclothing.co/shop/" id="image1">
<script> document.getElementById("image1").addEventListener("click", function() {
  this.src = "https://lowlifeclothing.co/wp-content/uploads/2020/11/Loop12D.gif"; location.href = 'https://lowlifeclothing.co/shop/'

    
}); </script> 

Answer 1

这是一个可能的例子。

jQuery(function($) {
  $("#image1").click(function() {
    $(this).attr("src", "https://lowlifeclothing.co/wp-content/uploads/2020/11/Loop12D.gif");
    var url = $(this).attr("data-click-href");
    setTimeout(function() {
      window.location.href = url;
    }, 1000);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img src="https://lowlifeclothing.co/wp-content/uploads/2020/11/Loop12.gif" data-click-href="https://lowlifeclothing.co/shop/" id="image1">

这使用 setTimeout() 等待 1000 毫秒或 1 秒，然后更改 URL。这使 GIF 有时间加载和显示动画。

主要问题是您为同一个元素分配了两个点击事件。 onclick 将具有优先权并在点击时重定向。