验证码重新加载和动画图标同步问题

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