Ajaxでjpegやgif等のオブジェクト自体を非同期に取得して表示させる方法はないでしょうか。(多分GoogleMapは画像ファイルを非同期に取得していると思うのですが)


今、自分が実現しているプログラムでは、responseText(あるいはresponseXML)で文字列<OBJECT src="abc.gif"/>
を取得してdivのinnerHTMLに展開しているのですが、その時点からabc.GIFファイルを読みに行くため、待ち状態が発生し、非同期のメリットが生かせない状態になってしまいます。

回答の条件
  • 1人3回まで
  • 登録:
  • 終了:2006/09/13 20:40:04
※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

回答2件)

id:llusall No.1

回答回数505ベストアンサー獲得回数61

ポイント35pt

直接の回答ではくすみません。

画像の差し替え程度であれば、Ajaxを使用するまでもないのでは・・・


単純に、

document.myIMG.src = "hoge.jpg";

など、srcに参照をセットして(切り替えて)あげれば良いだけです。


また、プレロードなる方法もあるので、以下を参考にしてください。

プレロードしておけば、待ち状態もないですしね。

http://www.openspc2.org/reibun/javascript/#18

id:irhnhhtn

ありがとうございます。

質問では分かりやすくするためObjectタグのみ書きましたが、実際には前後のHTML(XSL)も同時に取得してます。

また、画像については、沢山の中からチョイスして表示させる為、プレロードの仕組みだと全ての画像を読み込む必要があるので実用的ではありません。

ただ、この方法は知らなかったので別の場面で使えるかと思いますが・・・。

2006/09/06 21:04:40
id:lains_you No.2

回答回数50ベストアンサー獲得回数10

ポイント35pt

 ブラウザが限定されてしまいますが、base64文字列で画像データを取得し、JavaScriptでその画像を表示させる方法はどうでしょうか?

 Firefoxで動作することは確認していますが、IE6では表示できないようなので、あまり実用的ではないかも。

<img id="icon_here">
<script>
    var data = 'data:image/gif;base64,'+
'R0lGODlhHgAVAKL/AP///1paWrW1td7e3kqlIQAAAMDAwAAAACH5BAEAAAYALAAAAAAeABUAQAN2'+
'aLXcXibKKQu4OGvwHv2RdYnCIozYsq0EwYFfJxfCqdEjTM2dsm6tly70+0GGvuIGt6Idh4WBdFDK'+
'MHNIi0ip3SpTyGRgTB5jgk+dqGxuhr1fIfRb5tiaqnjqbj2lYTQ1JQM3d38gXk4jVWBZKBg1VlhQ'+
'cEULCQA7';
    var icon_elem = document.getElementById("icon_here");
    icon_elem.src = data;
</script>
  • id:llusall
    定期的に画像を差し替えるイメージでしょうか?

    でしたら、
    現在の画像を表示中の状態にした段階で、Ajaxで次に表示する画像ファイル名を取得、取得できたら、次に表示する画像をプリロードかけておく。表示する時間になったら、src にセット。

    これを繰り返すというのはどうでしょうか?

    ※プリロードに掛かる時間を考慮して差し替え間隔を決定しないといけませんが。
  • id:irhnhhtn
    具体的には、例えば社員名の一覧があって、そこの一行を選択すると、その人の詳細情報(住所とか)と、同時にその人の顔写真を表示する、というものです。

    ここで考慮すべきなのは、
    ・一覧の件数は多い、という前提で考える。
    ・一覧から選択される行は、前もって予想できない。
    というところですね。

    顔写真さえ無ければ、そこそこサクサク動くんですが・・・・
  • id:llusall
    力不足ですみません。

    サクッと表示させたいのであれば、やはりプレロード。
    その為には件数が多いとのことですので、ページングを検討する。

    画像ファイルのサイズをなるべく小さく。
    そしてスタイルシートで画像拡大。(苦しいですよね)
    http://www.htmq.com/style/zoom.shtml

    インターレースGIFで誤魔化す。

    この程度しか思いつきません。

  • id:irhnhhtn
    いえいえトンでもございません!
    相談に乗っていただけるだけで・・・・

    画像読み込みは、サクッと動く場合ともたつく場合があって、
    Ajax非同期通信と画像読み込みがバッティングすると重くなる
    気がしてきました。

    明日、読み込みのタイミングがずれるように修正してテストして
    みたいと思います。

    あとは言われている通り・・・画像サイズ縮小ですね。

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

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

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

回答リクエストを送信したユーザーはいません