キャプチャの再読み込みとアニメーションアイコンの同期の問題

Question

ウェブサイトでキャプチャを作成したい。私はそれをどのようにしたいかを説明しようとします。以下のコードをご覧ください：

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

やりたいことは、「Captcha Imageのリロード」リンクをクリックし、JavaScriptで最初の img タグのコンテンツを新しいcaptchaイメージに変更し、同時にreload.pngを変更することです。 reload.gifと、新しいキャプチャ画像が処理されている間継続したいアニメーションです。そして、新しいcaptcha画像が画像を読み込んだのと同時に、reload.gifアニメーションをreload.png静的画像に戻したいと思います。問題は、CAPTCHAイメージが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
  };
};