0

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

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

私がやりたいのは、「キャプチャ画像の再読み込み」リンクをクリックし、JavaScriptを使用して、最初のimgタグのコンテンツを新しいキャプチャ画像に変更すると同時に、reload.pngをreload.gifに変更することです。新しいキャプチャ画像が処理されている限り持続したい。そして、新しいキャプチャ画像が画像を読み込んだのと同じタイミングで、reload.gifアニメーションをreload.png静止画像に戻したいと思います。問題は、キャプチャ画像がPHPのGDライブラリによって生成されていることであり、新しい画像を作成するのにどれくらいの時間がかかるかわかりません。同期できるように助けてください。この種のことをするための良いアプローチがあるかもしれません…

ありがとう！

4

1 に答える 1

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
  };
};
于 2009-11-29T18:22:24.093 に答える