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

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

1 个答案: