Ajaxプログラミングを行っています


IMG要素があります
表示する画像を javascript で動的に切り替えます

切替中に 任意の画像を表示したいのですが
どのように実現できるかわかりません

○画像1表示中

|← イベント発生

○画像2読み込み開始
|  ↑
| ココの間
|  ↓
○画像2読み込み終了

現状ですと、切替中は
画像1が表示されていますが
透明な画像を表示したいと考えています

条件は
 複数の切替が同時に起こっても
 動作が軽いこと
です

切替後の画像はイベント発生ごとに変わりますので
load イベントは使えません
画像名決めうちで メソッド定義できないからです
また、その都度イベントに匿名関数をセットするのも
処理が重いので これもだめです

スタイルシートの visible 属性をつかうのがいいかと思いましたが
(画像切替時に hidden にし、
 load イベントで visibleにする)
スタイルのアクセスも 時間がかかるので
できれば 画像を切り替える方式を採用したいんです

Ajaxで行うので
javascript css以外の 要素は使いたくありません(Flash等)

よいアイディアを教えて下さい

回答の条件
  • 1人2回まで
  • 登録:2007/12/20 18:06:03
  • 終了:2007/12/20 18:49:47

回答(1件)

id:y-kawaz No.1

y-kawaz回答回数1419ベストアンサー獲得回数2252007/12/20 18:35:17

ポイント60pt

これはAjaxではないですね、Imageオブジェクトを使った先読みで簡単に実現できます。

サンプルコードを作ってみましたので html に保存して確認してみてください。

<html>
<head>
<script type="text/javascript">
//読み込み中画像は先読みしておく
var loadingImage = new Image();
loadingImage.src = 'http://www.hatena.ne.jp/statics/images/indicator.gif';

function loadImage(url) {
  //ターゲットを読み込み中画像に差し替える
  var targetImg = document.getElementById('targetImg');
  targetImg.src = loadingImage.src;
  //新しい画像を作成
  var newImage = new Image();
  //読込完了時にターゲットを差し替えるリスナを登録する
  newImage.onload = function() {
    targetImg.src = newImage.src;
  };
  //画像読み込み開始
  newImage.src = url;
}
</script>
</head>
<body>
  <input type="button" value="load image1" onclick="loadImage('http://imgsrc.hubblesite.org/hu/db/1999/12/images/a/formats/1280_wallpaper.jpg')" />
  <input type="button" value="load image2" onclick="loadImage('http://imgsrc.hubblesite.org/hu/db/2007/19/images/a/formats/1280_wallpaper.jpg')" />
  <input type="button" value="load image3" onclick="loadImage('http://imgsrc.hubblesite.org/hu/db/2004/27/images/a/formats/1280_wallpaper.jpg')" />
  <input type="button" value="load image4" onclick="loadImage('http://imgsrc.hubblesite.org/hu/db/1999/12/images/a/formats/1280_wallpaper.jpg')" />
  <input type="button" value="load image5" onclick="loadImage('http://imgsrc.hubblesite.org/hu/db/2006/23/images/a/formats/1280_wallpaper.jpg')" />
  <br/>
  <img id="targetImg" src="http://q.hatena.ne.jp/images/logo_question.gif" />
</body>
</html>

やっていることは以下の通りです。

・Imageオブジェクトを作成して画像を先読みしておく(loadingImage)。

・ボタンが押されたら先読みしてある読み込み中画像(loadingImage)に差し替える。

・新しいImageオブジェクトを作成する(newImage)。

・newImage.onload に読込完了時の動作を設定しておく、内容はtargetImgをnewImageに差し替えること。

・newImage.src にURLがセットされると画像読み込みが始まる。

・newImageがメモリ中に読み込み完了すると onload に設定した関数が実行されて、targetImg の画像が差し替えられる。

id:you_got

なるほど

納得しました!

表示しない部分に 読み込むのがミソですね

ありがとうございます!!

2007/12/20 19:51:00

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません