Rzecz: Mam stronę, która musi wyświetlać nieokreśloną liczbę obrazów, ładowanych przez AJAX (używając kodowania base64 po stronie serwera) jeden po drugim.

var position = 'front';
while(GLOB_PROCEED_FETCH)
{
    getImageRequest(position);
}

function getImageRequest(position)
{
    GLOB_IMG_CURR++;
$.ajax({
        url: urlAJAX + 'scan=' + position,
        method: 'GET',
        async: false,
        success: function(data) {
            if ((data.status == 'empty') || (GLOB_IMG_CURR > GLOB_IMG_MAX))
            {
                GLOB_PROCEED_FETCH = false;
                return true;
            }
            else if (data.status == 'success')
            {
                renderImageData(data);
            }
        }
    });
}

Problem polega na tym, że obrazy (zbudowane za pomocą funkcji renderImageData ()) są dołączane (razem) do pewnego DIV tylko wtedy, gdy wszystkie obrazy są pobierane. Chodzi mi o to, że nie ma możliwości manipulacji DOM, dopóki pętla się nie skończy.

Muszę ładować i wyświetlać obrazy pojedynczo ze względu na możliwą ogromną liczbę obrazów, więc nie mogę ich układać, dopóki wszystkie nie zostaną pobrane.