How to load lots of php generated images on a webpage

Question

I have a website where all the pages have lots of images inside them. Each image is generated dynamically by PHP (I mean that the src="" attribute of the img tag is something like "/image.php?id=4553").

I am controlling the cache properly to speed up the loading of the same image more times and the time it takes to load a single image is very quick. The problem is that the first 5-6 images are loaded in the same time the page loads, the others are loaded MANY SECONDS later (5-10-15 seconds later). Firebug tells me that the problem is due to the queueing of the requests the browsers perform in order to limit simultaneous connections to the server.

I tried sending a "Connection: Keep-Alive" header when I send the HTML of the page, but maybe it's not enough!

Any help?

I know there are jQuery plugins such as lazy load that load images only when they're visible on the viewport. That would be a nice "workaround", but I'd like to know if there's any PROPER way of controlling this type of image loading.

Thank you very much.

Answer 1

Firebug is summarizing the problem very well. Browsers will only load x amount of resources from a domain at one time. x is typically around 8 although this can vary by browser and can be changed by users in their settings. The only way to overcome this is to have the browser download resources from different domains (subdomains count as different domains) which will allow for a greater amount of resources to be downloaded at one time. You can probably accomlish this by tricking the browser into thinking it is downloading from different domains by using .htaccess and mod_rewrite to have your images downloaded from fake subdomains which in reality are being downloaded from the same domain. This would allow you to download more then the allotted resources at one time.