Captcha yeniden ve animasyonlu bir simge senkronizasyon sorunu

1 Cevap php

Dear web developers, I want to create a captcha in my website. I will try to describe how I want to do that. See the code below please:

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

What I want to do is, to click on “Reload Captcha Image” link and with JavaScript change the content of the first img tag to a new captcha image, and simultaneously to change reload.png to reload.gif which is and animation that I want to last as much as the new captcha image is being processed. And I want to change back the reload.gif animation to the reload.png static image, right the same time when the new captcha image has been load image. The problem is that the captcha image is being generated by GD library of PHP, and I don’t know how much time that will take to create a new image. Please help me to be able to synchronize. May be there is a good approach for doing this kind of things…

Teşekkürler!

1 Cevap

Eğer yeni CAPTCHA resmi tarayıcısı yüklü olan tam olarak ne zaman bilmek, görüntü üzerinde onload olayını kullanabilirsiniz, ben biçimlendirme için kimlikleri ekledi:

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

Sonra kodu, olay işleyicileri bağlantı:

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

etiketler