Captcha Reloading 및 애니메이션 아이콘 동기화 문제

Question

내 웹 사이트에서 보안 문자를 만들고 싶습니다. 나는 어떻게하고 싶은지 설명하려고 노력할 것입니다. 아래 코드를 참조하십시오.

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

내가하고 싶은 것은“Captcha 이미지 Reload”링크를 클릭하고 JavaScript를 사용하여 첫 번째 내용을 변경하는 것입니다. IMG 새로운 보안 문자 이미지에 태그를 지정하고 동시에 Reload.png를 Reload.gif로 변경하여 새로운 Captcha 이미지가 처리되는만큼 지속하려는 애니메이션을 변경하십시오. Reload.gif 애니메이션을 Reload.png 정적 이미지로 다시 변경하고 싶습니다. 문제는 CARTCHA 이미지가 PHP의 GD 라이브러리에 의해 생성되고 있다는 것입니다. 새로운 이미지를 만드는 데 얼마나 많은 시간이 걸리는지 모르겠습니다. 동기화 할 수 있도록 도와주세요. 이런 종류의 일을하는 데 좋은 접근 방식이있을 수 있습니다…

감사!

Answer 1

당신은 사용할 수 있습니다 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
  };
};