验证码重载和动画图标同步问题

Question

我想在我的网站中创建验证码。我将尝试描述我想如何做到这一点。请参阅下面的代码：

<img src=”captcha_img.png”>   <img src=”reload.png”>  <a href=”..”>Reload Captcha Image</>

我想要做的是，单击“重新加载验证码图像”链接，然后使用 JavaScript 将第一个 img 标签的内容更改为新的验证码图像，同时更改reload.png 到 reload.gif，这是我希望在处理新的验证码图像时持续的动画。我想在新的验证码图像加载图像的同时将 reload.gif 动画更改回 reload.png 静态图像。问题是验证码图像是由 PHP 的 GD 库生成的，我不知道创建新图像需要多少时间。 请帮助我能够同步。也许有一个很好的方法来做这种事情……

谢谢！

Answer 1

您可以在图像上使用 onload 事件，以准确了解新的验证码图像何时加载到浏览器上，我将 ID 添加到您的标记中：

<img id="captcha" src="captcha_img.png">
<a id="reloadLink" href="..">
  <img id="reloadImg" src="reload.png"> Reload Captcha Image
</a>

然后在您的代码中，连接事件处理程序：

// Connect event handlers
window.onload = function () {
  // get the DOM elements
  var captcha = document.getElementById('captcha'),
      reloadImg = document.getElementById('reloadImg'),
      reloadLink = document.getElementById('reloadLink');

  // reload the captcha image when the link is clicked
  reloadLink.onclick = function () {
    var captchaURL = "captcha.php"; // change this with your script url

    captcha.src = captchaURL + "?nocache=" + (+new Date()); // cache breaker
    reloadImg.src = "reload.gif"; // set "animated" reload image
    return false; // prevent link navigation
  };

  captcha.onload = function () { // when the captcha loaded, restore reload image
    reloadImg.src = "reload.png"; // "static" reload image
  };
};