代码之家 › 专栏 › 技术社区 › Narek

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

captcha ajax javascript php

0

Narek · 技术社区 · 15 年前

我想在我的网站上创建一个验证码。我会尽量描述一下我想怎么做。请参见下面的代码:

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

我要做的是,单击__reload captcha image__链接,并使用javascript更改第一个 IMG 标记到一个新的captcha图像,同时将reload.png更改为reload.gif,这是一个动画,我希望它和新的captcha图像一样持久。我想把reload.gif动画改回reload.png静态图像,就在加载新的captcha图像的同时。问题是captcha图像是由php的gd库生成的,我不知道创建新图像需要多少时间。请帮助我进行同步。可能有一个很好的方法来做这种事情

谢谢!

1 回复 | 直到 15 年前

1

Christian C. Salvadó 15 年前

你可以使用 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
  };
};