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

Posted 2023-03-25

【中文标题】如何延迟 onClick 图像链接，以便 .gif 动画可以在页面切换之前完成？

【英文标题】：How do I delay an onClick image link so the .gif animation can finish before the page switches?

【发布时间】：2021-03-05 16:05:57

【问题描述】：

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

我当前的代码（运行 sn-p 时链接不会加载，但它可以在实际站点上运行）；

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

【参考方案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 将具有优先权，并会在点击时重定向。

【讨论】：

这正是我想要的！我能得到一些进一步的帮助吗？我是一名新手开发人员，现在正在尝试将此脚本添加到我的网站中，我在 Wordpress 上使用 Elementor 块生成器，我该如何将其插入？我有一个自定义 html 小部件，我一直在编写代码，直到我尝试复制并粘贴您的答案。当我在 *** 上运行 sn-p 时它可以工作，但不是我的网站。

@hunnaharms 我不熟悉那个 WP 插件。如果您仍在苦苦挣扎，我会查看支持文档或发布新问题。