只要通過AJAX調用接收到圖像，就會立即顯示動態生成的圖像

我想要做的是加載圖像，我在頁面完全加載前動態生成一個接一個的圖像。這是我在做什麼。我通過createXMLHttpRequest向服務器發送ASYNC請求。在服務器端，我創建新圖像（圖表圖像）並返回json格式的圖像屬性。只要通過AJAX調用接收到圖像，就會立即顯示動態生成的圖像

這裏是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，但只得到顯示，當最後加載圖像的片段。任何想法，我在這裏失蹤。

來源

2012-01-03 user1117888

我的猜測，沒有看到一個實際的例子，是因爲你在同一時間運行所有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選項卡。

來源

2012-01-06 22:30:23

只要通過AJAX調用接收到圖像，就會立即顯示動態生成的圖像

回答

相關問題