Captcha recarga e animado problema ícone de sincronização

Question

Eu quero criar um captcha no meu site. Vou tentar descrever como eu quero fazer isso. Veja o código abaixo, por favor:

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

O que eu quero fazer é, clique no link “Recarregar Imagem Captcha” e com JavaScript alterar o conteúdo do primeiro img para uma nova imagem de captcha, e simultaneamente a reload.png mudança para reload.gif que é e animação que eu quero para durar tanto quanto a imagem captcha novo está sendo processada. E eu quero mudar de volta a animação reload.gif à imagem reload.png estática, direita ao mesmo tempo quando a imagem captcha nova tem sido imagem de carga. O problema é que a imagem captcha está sendo gerado pela biblioteca GD do PHP, e eu não sei quanto tempo que vai demorar para criar uma nova imagem. Por favor, me ajude a ser capaz de sincronizar. Pode estar lá é uma boa abordagem para fazer este tipo de coisas ...

Obrigado!

Answer 1

Você pode usar o evento onload na imagem, para saber exatamente quando sua imagem captcha nova foi carregada no navegador, eu adicionei IDs para sua marcação:

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

Então no seu código, você conectar os manipuladores de eventos:

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