보안 문자로드 및 애니메이션 아이콘 동기화 문제

Question

내 웹 사이트에 보안 문자를 만들고 싶습니다. 나는 내가 어떻게하고 싶은지 설명하려고 노력할 것이다.

는 내가하고 싶은 것은 새로운 보안 문자 이미지에 첫 IMG 태그의 내용을 변경 "새로 고침 보안 문자 이미지"링크를 자바 스크립트로 클릭한다

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

, 동시에 : 아래의 코드를주십시오 참조 reload.png를 reload.gif로 변경하고 이는 새 captcha 이미지가 처리되는만큼 오래 지속되도록하려는 애니메이션입니다. 새로운 captcha 이미지가로드 된 이미지와 동시에 바로 reload.gif 애니메이션을 reload.png 정적 이미지로 다시 변경하려고합니다. 문제는 captcha 이미지가 PHP의 GD 라이브러리에 의해 생성되고 새 이미지를 만드는 데 얼마나 많은 시간이 걸릴지 모르겠다는 것입니다. 동기화 할 수 있도록 도와주세요. 이런 종류의 일을하기에 좋은 접근법이있을 수 있습니다 ...

고마워요!

Answer 1

당신은 내가 당신의 마크 업에 ID를 추가, 새로운 보안 문자 이미지가 브라우저에로드 된 정확히 알고, 이미지에 onload 이벤트를 사용할 수 있습니다 : 코드에서 다음

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