Отображение динамически сгенерированных изображений, как только изображение получено с помощью вызова AJAX - PullRequest
Новая
       20

Отображение динамически сгенерированных изображений, как только изображение получено с помощью вызова AJAX

1 голос
/ 03 января 2012

То, что я пытаюсь сделать, это загружать изображения, которые я динамически генерирую, один за другим до полной загрузки страницы.Вот что я делаю. Я делаю 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 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, но отображаются только при загрузке последнего изображения.Есть идеи, что мне здесь не хватает.

1 Ответ

0 голосов
/ 07 января 2012

Я предполагаю, что, не видя реального примера, это то, что, поскольку вы выполняете все 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-запросом.Чтобы увидеть это, проверьте вкладку NET в Firebug.

...