I've got a social community with a lot of traffic. In the right column of the site's layout, we got a "online list" that prints out a 40x40px thumbnail pic of friends, people in your area etc. 30-40 images in total.
Just before the right column loads, it hangs as all these images are loaded. I need a faster solution compatible down to IE6.
Is it possible to load images by ajax after the page has loaded, use some kind of inline gfx (supported by IE6) or other methods?
Yes, you can defer loading of the images, though you might want to include the regular HTML version inside a <noscript> tag so that simpler user agents/spiders can see your page.
Another technique is to load the images from a number of subdomains, since browsers typically only open a small number of connections to each domain. For example, if you site is on foo.com, load your static images from a.foo.com, b.foo.com and c.foo.com
I would also consider not showing 30-40 dynamic pictures since neither the server nor the client can effectively cache these pictures.
Loading the images via AJAX will work. You can easily do it using jQuery for example. Define a div for every image you want to display. Perhaps you could display a "Loading.." image or something like that in place of the actual image, when the page is initially displayed.
There are many options with jQuery. There is a plug-in for lazy loading, you can preload images and you can easily add effects when the image is displayed.
If your problem is related to resizing these images server side on the run, you might want to store the thumbnails after resizing them once, and then serve only the thumbnails on the following loads.
40 small images should be no problem for most scripts. 40 full size images getting resized can be a lot of load.
pseudocode:
You can get the server to cache these images by using apache rewrite to route certain .jpg|.png|etc requests to your resizing script. Other servers undoubtedly have similar features.