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

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

<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库生成的，我不知道创建新图像需要多少时间。 请帮助我同步。也许有一个很好的方法来做这类事情

---

谢谢

您可以在图像上使用

onload

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

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

---

GD生成验证码真的需要很多时间吗？

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