Technique for prioritising image download in web browser

Question

I have a web page that contains many thumbnail images (about 100). When you click on one of the thumbnails, a modal popup is created, which is actually a new web page inside an iframe. This new web page contains 1 large image.

The problem occurs when the user opens the popup before all of the 100+ thumbnails have finished downloading on the parent page. The user must now wait a long time before they can see the large image in the popup, because the browser doesn't know to prioritise this new image above the thumbnails it is already trying to retrieve.

Any thoughts on a solution to this problem?

Answer 1

When you load that page, the browser queues up 100 requests for those thumbnails. There's no way I know of to remove items from the request queue. Depending on the browser, it may request up to 6 concurrently (referring to this thread), but they'll still be queued ahead of your modal dialog's large image. What you can do (from that same thread) is host the modal dialog images on a separate subdomain so the browser places them into a separate queue, as if they were on entirely different sites. That new queue would be allowed to run concurrently with your thumbnail requests.

Answer 2

You can use BASE64 Data URI for all the small images. Your page can became larger but in some installs - whole page load became faster.

The other option - load the large image from other subdomain, as the "queue" is by hostname.

Answer 3

Interesting question. I've never come across such a situation. A workaround that comes to mind would be to load the thumbnail images only when the user is viewing them.

If you are using jQuery, you could try using this plugin:

Lazy Load Plugin for jQuery

Answer 4

One way to resolve this is to combine your small thumbnails into one large tiled image, reducing the number of images on the page.