Captcha Nachladen und animiertes Symbol Synchronisierungsproblem

Question

Ich möchte ein Captcha in meiner Website erstellen. Ich werde versuchen, zu beschreiben, wie ich das tun will. Sehen Sie den Code bitte:

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

Was ich tun möchte, ist, auf „Reload Captcha Image“ Link zu klicken und mit JavaScript, um die Inhalte des ersten img ändern -Tag auf ein neues Captcha-Bild, und gleichzeitig reload.png zu ändern zu reload.gif der und Animation, die ich möchte so viel wie das neue captcha Bild verarbeitet dauern wird. Und ich will die reload.gif Animation auf das reload.png statische Bild ändern, hinten, rechts zur gleichen Zeit, wenn das neue Captcha Bild Liest Bild war. Das Problem ist, dass das Captcha Bild wird durch GD-Bibliothek von PHP erzeugt wird, und ich weiß nicht, wie viel Zeit, um ein neues Bild erstellen nehmen. Bitte helfen Sie mir der Lage sein, zu synchronisieren. ist ein guter Ansatz zu tun, diese Art von Dingen, kann es ...

Danke!

Answer 1

Sie können das onload Ereignis auf dem Bild verwenden, um genau zu wissen, wenn Ihr neues Captcha-Bild auf dem Browser geladen wurde, habe ich IDs Markup:

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

Dann in Ihrem Code, schließen Sie die Ereignishandler:

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