Multiple AJAX requests are not calling onSuccess until all requests are done

Question

Ok, so I'm working on a little photo gallery that will load a set of images using AJAX. Basically it will load a 'loading.gif' placeholder image, make an AJAX request to generate the thumbnail image. PHP page generates the thumbnail and sends a confirmation that the image has been generated and the path of it. My onSuccess should then replace the loading.gif with the actual thumbnail.

The problem: This all works just fine, except it won't start putting the thumbnail images in until after ALL the unfinished requests are done. So instead of having the images appear 1 or 2 seconds apart, on a page with 20 thumbnails to generate I wait 20 seconds then while the AJAX requests are going, then begins to display the thumbnails, even though some have been ready for a while.

Here is my relevant code:

function getImageList() {
//Get an XML list of all the images to be displayed.
$.ajax({
 url:"gallery.php",
 type: "POST",
 data:{mode: "getImageList"},   
 success: function(responseText){  
  $(responseText).find('galImg').each(function(){ 

   //create the image divs and images, set properties and get values.
   var imageBox = document.createElement('div');
   var imageElement = document.createElement('img');
   imageBox.setAttribute('class','imageBox');
   imgThumbPath = $(this).find('img_thumb').text();
   imgThumbReady = $(this).find('img_thumb_ready').text();
   imgPath = $(this).find('img_path').text();
   imageElement.setAttribute('id',imgPath);
   imageBox.appendChild(imageElement);
   $('#galleryContainer').append(imageBox);  

   //now load the src of the image
   if (imgThumbReady=='no') {
    imageElement.setAttribute('src',loadingImage);
    $.ajax( {
     url: "gallery.php", 
     type: "POST",
     data: {mode: "generateThumbnail",imgPath:imgPath},   
     success: function(response){  
      if ($(response).find('message').text() == 'Sucess') {
        imageElement.setAttribute('src',$(response).find('galImg').find('img_thumb').text());
       } else {
        alert('Problem Loading Image - '+$(response).find('message').text());
       }
      },
     datatype: "html"
     } );
   } else {
    imageElement.setAttribute('src',imgThumbPath);
   }
  }); 
 },  
 datatype:"html"  
});  

}

Answer 1

The way I understand your code, you are making an ajax request to generate all of you thumbnails at once. What you want to do is probably to make some kind of loop to make an AJAX call to generate your images one by one. And to avoid having the limited connection issue, you should make use of the callback function of your ajax request to initiate the next request.

So your code logic will be more like this :

function loadImage(imagePath){
  $.ajax( {
    url: "gallery.php",
    type: "POST",
    data: {mode: "generateThumbnail",imgPath:imgPath},
    success: function(response){
      // Your code to display this new thumnail goes here
      imagePath(nextImage);
    }
};

This code is untested and incomplete, but I think it should be enough to point you in the right direction. I think it's the easiest/safest way to get the effect that you wish for. Let me know if it helps!