Page waits for all AJAX calls to complete before updating

Question

Sometimes on my page I do a lot of ajax calls at once, concurrently. The idea is that every element gets updated as its data becomes available (I do not want to queue the calls). Sometimes, however, the webpage will not update any elements until all the ajax calls are complete.

For example, I have four pictures in a row that I am updating - each image has its own ajax callback that will update its source once that data is available; the code looks something like this:

for (var i = 0; i < numPictures; i++ ){
  Dajaxice.Images.load_picture(callback_function, {'pictureId': i});
}

the callback_function puts the image into its UI element once its ready:

imgSnippet = '<img src="' + data.img_source + '"/>'
$("#" + data.container_id).html(imgSnippet);

(data is the objects this function received from the server)

I am using (as you can see in the example) dajax (plugin for django) for the AJAX functionality. On the server side I have an Apache (2.2) running django 1.3 via mod_wsgi.

When executed, even though some ajax calls finish earlier (I can see it on my server), the page will not update any elements until the last call comes back.

Any suggestions?

Thanks,

Answer 1

I suggest making an array to hold all the images and make a new function that will displays the images when yoy got them all from the server and in the call back foreach image increase q predefined counter when the counter is equals to the number of images display the photos and zero the counter and you can put loading on the place where the picture should be untill qll of them wwlith you Sorry i did'nt wrote your code but i am on the mobile maybe i will post it later for you if my answer not clear

Answer 2

You may be able to resolve this by wrapping the contents of your callback functions with a setTimeout call with a 0 or 1 millisecond timeout. This frees the system to update the screen.