Ajax: loading multiple images at once

Question

I have an image grid (3x3, side by side, laid out in a). I need to update this grid so often. Since each picture is independent of the others (they are captured from different places), I decided to upload each picture with my own ajax callback, for example:

for (var i=0; i < numPictures; i++) { Dajaxice.loadPicture(callback_loadPicture, {'picture_id':i}) } 

The callback_loadPicture () function puts the image at the right place in.

The problem is that although some image ends up loading earlier than others, the browser will not display anything until the last ajax call is completed. Since some calls may time out, this means that I do not see anything until a single image disappears.

In each browser, this behaves somewhat differently: sometimes the image is shown when the callbacks end (but usually it is not), sometimes the browser displays some images, but postpones the display until the latter finishes loading.

I use:

• django 1.3 (python 2.7)
• windows x64 as (test) server
• dajaxice to implement ajax

I am open to changing the structure of my code.

Any comments or suggestions would be appreciated.

Answer 1

Since ajax calls are blocked, as chrisdpratt said, if you really need to display images at the same time, I would advise you to pre-set a grid of 3x3 images and, when required by the code, you can display them.

With this in mind, you can run the code that you already have on $(document).ready() , but make the images hidden (i.e. display:none ). When you need it later, you simply change the display attribute to the images you need to display.

Answer 2

If the problem you saw is really caused by a single-threaded implementation of the Django development server, you can try django-devserver (https://github.com/dcramer/django-devserver). Among other improvements, he boasts:

"Improved recipient server to handle requests at the same time."

Other improvements make it worthy too!