0

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

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

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

谢谢！

4

1 回答 1

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
  };
};
于 2009-11-29T18:22:24.093 回答