通过AJAX调用接收图像后立即显示动态生成的图像

Display dynamically generated images as soon as image received via AJAX call

本文关键字：图像 显示 动态 调用 AJAX 通过      更新时间：2023-09-26

我要做的是加载我在页面完全加载之前动态生成的一个又一个图像。这就是我正在做的。我正在通过createXMLHttpRequest向服务器发出异步请求。在服务器端，我正在创建新图像(图表图像)并以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 LANGUAGE="Javascript" src="js_lib/ajaxCaller.js"></SCRIPT>
<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上一个接一个加载，但只有在最后一个图像加载时才显示。你知道我错过了什么吗?

在没有看到实际示例的情况下，我的猜测是，因为您同时运行所有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选项卡。

相关文章：