驗證碼重新加載和動畫圖標同步問題

Question

我想在我的網站上創建驗證碼。我會盡力描述我想怎麼做。請參見下面的代碼，請：

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

我想要做的是，點擊「刷新驗證碼圖片」鏈接，並使用JavaScript第一IMG標記的內容更改爲新的驗證碼圖像，同時將reload.png更改爲reload.gif這是和我想要持續的動畫一樣多，正如正在處理新的驗證碼圖像一樣。我想將reload.gif動畫更改回reload.png靜態圖像，正好與新的驗證碼圖像加載圖像時相同。問題在於，由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 
    }; 
};