AJAXで画像を受信すると、動的に生成された画像が表示されます

Question

私がやっているのは、ページが完全に読み込まれる前に動的に生成している画像を読み込むことです。ここで私は何をしているのですか。私はcreateXMLHttpRequest経由でASYNCリクエストをサーバーに送ります。サーバー側では、新しいイメージ（チャートイメージ）を作成し、イメージ属性をjson形式で返します。ここで

は、HTMLコードのスニペット

<!-- first image --> 
<div id="image3Obj"> 
    <div id="image3"><img src="img/loader32.gif"></div> 
</div> 

<!--second image --> 
<div id="image2Obj"> 
    <div id="image2"><img src="img/loader32.gif"></div> 
</div> 

<!-- third image--> 
<div id="image1Obj"> 
    <div id="image1"><img src="img/loader32.gif"></div> 
</div> 

<script type="text/javascript" defer>load_components();</script> 

JavaScriptコードのスニペット

<script type="text/javascript"> 

function load_components() { 
    createUrlStr('url1'); 
    createUrlStr('url2'); 
    createUrlStr('url3'); 
} 


function createUrlStr(url) 
    // make async request to server and generating brand new image, then returning image div name, source, width and height back in json format 
    ajaxCaller.getPlainText(url_str, loadImage); 
} 

function loadImage() { 
    var jsonObj = eval('(' + xReq.responseText + ')'); 
    if (jsonObj.imgDiv != undefined && jsonObj.imgSrc != undefined) { 
     var newImg = document.createElement("img"); 
     newImg.src = jsonObj.imgSrc; 
     if (jsonObj.imgWidth != undefined && jsonObj.imgHeight != undefined) { 
      newImg.width = jsonObj.imgWidth; 
      newImg.height = jsonObj.imgHeight; 
     } 
     document.getElementById(jsonObj.imgDiv).appendChild(newImg); 
    } 
} 

</script> 

問題はイメージがHTML上の別の後にロードされたものを得ることですが、最後の画像がロードされたときにのみ表示されつつあります。私はここで何が不足しているか考えています。

Answer 1

3つの非同期要求をすべて同時に実行しているため、実際には非常に迅速に発生するため、同時にいくつかの間隔を空けて同時に発生するようですミリ秒。次の例のようにリクエストが遅れても、希望どおりに表示されますか？

function load_components() { 
    var x,y,z; 

    x = setTimeout(function(){ createUrlStr('url1'); }, 100); 
    y = setTimeout(function(){ createUrlStr('url2'); }, 2000); 
    z = setTimeout(function(){ createUrlStr('url3'); }, 5000); 
} 

また、サーバー側で画像を生成し、順番にタグを挿入している間に、画像データはブラウザではない、あなたのAJAXリクエストによって事後的にダウンロードされていることに注意してください。これを確認するにはFirebugのNETタブをチェックしてください。