我想要做的是在页面完全加载之前加载我动态生成的图像。这就是我正在做的事情。我正在通过 向服务器发出 ASYNC 请求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 选项卡。