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

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

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:

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

  11. //create the image divs and images, set properties and get values.
  12. var imageBox = document.createElement('div');
  13. var imageElement = document.createElement('img');
  14. imageBox.setAttribute('class','imageBox');
  15. imgThumbPath = $(this).find('img_thumb').text();
  16. imgThumbReady = $(this).find('img_thumb_ready').text();
  17. imgPath = $(this).find('img_path').text();
  18. imageElement.setAttribute('id',imgPath);
  19. imageBox.appendChild(imageElement);
  20. $('#galleryContainer').append(imageBox);  
  22. //now load the src of the image
  23. if (imgThumbReady=='no') {
  24. imageElement.setAttribute('src',loadingImage);
  25. $.ajax( {
  26. url: "gallery.php", 
  27. type: "POST",
  28. data: {mode: "generateThumbnail",imgPath:imgPath},   
  29. success: function(response){  
  30. if ($(response).find('message').text() == 'Sucess') {
  31. imageElement.setAttribute('src',$(response).find('galImg').find('img_thumb').text());
  32. } else {
  33. alert('Problem Loading Image - '+$(response).find('message').text());
  34. }
  35. },
  36. datatype: "html"
  37. } );
  38. } else {
  39. imageElement.setAttribute('src',imgThumbPath);
  40. }
  41. }); 
  42. },  
  43. datatype:"html"  
  44. });  

  46. }