Captcha إعادة الرسوم المتحركة رمز التزامن المشكلة

Question

أريد إنشاء captcha في موقع الويب الخاص بي.سأحاول أن أصف كيف تريد أن تفعل ذلك.انظر التعليمات البرمجية التالية من فضلك:

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

ما أريد القيام به هو النقر على "تحميل صورة Captcha" رابط مع جافا سكريبت تغيير المحتوى من أول img الوسم جديد صورة captcha, و في نفس الوقت للتغيير تحميل.png reload.gif وهو والرسوم المتحركة التي أريد أن الماضي بقدر جديدة صورة captcha يتم معالجتها.و أريد تغيير مرة أخرى reload.gif الرسوم المتحركة إلى تحديث.png صورة ثابتة, صحيح نفس الوقت عندما captcha صورة تم تحميل الصورة.المشكلة هي أن صورة captcha يجري إنشاؤها بواسطة GD مكتبة PHP, وأنا لا أعرف كم من الوقت سوف يستغرق لخلق صورة جديدة.الرجاء مساعدتي أن تكون قادرا على مزامنة.قد يكون هناك نهج جيد على هذا النوع من الأشياء...

وذلك بفضل!

Answer 1

يمكنك استخدام onload الحدث على الصورة ، أن تعرف بالضبط متى الجديدة captcha صورة تم تحميلها على المتصفح, لقد تم إضافة معرفات العلامات الخاص بك:

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