Перезагрузка капчи и проблема синхронизации анимированных иконок - PullRequest
Новая
       15

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

0 голосов
/ 29 ноября 2009

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

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

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

Спасибо!

1 Ответ

1 голос
/ 29 ноября 2009

Вы можете использовать событие 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
  };
};
...