Captcha перезагрузка и анимированная проблема синхронизации значков

Question

Я хочу создать капчу на своем веб-сайте. Я попытаюсь описать, как я хочу это делать. Смотрите ниже код пожалуйста:

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

То, что я хочу сделать, это, нажать на кнопку «Reload Captcha Image» ссылку и с JavaScript изменить содержание первого IMG тег к новому капчи изображения, и одновременно изменить reload.png на reload.gif, который есть и анимация, которую я хочу проделать так же, как обрабатывается новое изображение captcha. И я хочу изменить анимацию reload.gif на статическое изображение reload.png, в то же время, когда новое изображение captcha было загруженным изображением. Проблема заключается в том, что изображение captcha создается GD-библиотекой PHP, и я не знаю, сколько времени потребуется для создания нового изображения. Пожалуйста, помогите мне синхронизировать. Может быть, есть хороший подход для такого рода вещей ...

Спасибо!

Answer 1

Вы можете использовать onload событие на изображение, чтобы точно знать, когда ваш новый CAPTCHA изображение было загружено в браузере, я добавил идентификаторы разметке:

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