Rechargement Captcha et problème de synchronisation d'icônes animées

Question

Je souhaite créer un captcha sur mon site Web. Je vais essayer de décrire comment je veux faire ça. Voir le code ci-dessous s'il vous plaît:

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

Ce que je veux faire est de cliquer sur « Recharger Captcha image » lien avec JavaScript modifier le contenu de la première tag img à une nouvelle image captcha, et en même temps pour changer reload.png à reload.gif qui est et l'animation que je veux durer autant que la nouvelle image captcha est en cours de traitement. Et je veux revenir en arrière l'animation reload.gif à l'image statique reload.png, juste au moment où la nouvelle image captcha a été chargée image. Le problème est que l'image captcha est générée par la bibliothèque GD de PHP, et je ne sais pas combien de temps cela prendra pour créer une nouvelle image. S'il vous plaît aidez-moi à être en mesure de synchroniser. Peut être qu'il ya une bonne approche pour faire ce genre de choses ...

Merci!

Answer 1

Vous pouvez utiliser l'événement onload sur l'image, de savoir exactement quand votre nouvelle image captcha a été chargée sur le navigateur, j'ai ajouté ID à votre balisage:

<img id="captcha" src="captcha_img.png"> 
<a id="reloadLink" href=".."> 
    <img id="reloadImg" src="reload.png"> Reload Captcha Image 
</a> 

Puis dans votre code, vous vous connectez les gestionnaires d'événements:

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