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选项卡。

一旦通过AJAX调用接收到图像，就显示动态生成的图像

1 个答案: