只要通过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调用接收到图像，就会立即显示动态生成的图像

回答

相关问题