Pętla while z wywołaniami AJAX jQuery async
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.