6

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?

cbp
  • 25,252
  • 29
  • 125
  • 205
  • 1
    Can we see the web page? My main question is whether the thumbnails were pre-generated or are being scaled down on the client-side. – Zach Shipley Aug 16 '12 at 22:47
  • Are all images viewable above the fold on page load? – Paul Aug 16 '12 at 22:51
  • Sorry the page is on an intranet. Not all images are above the fold, some are below. The thumbnails are pre-generated. – cbp Aug 17 '12 at 03:14

4 Answers4

4

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.

Community
  • 1
  • 1
Zach Shipley
  • 1,092
  • 6
  • 5
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.

Moshe L
  • 1,797
  • 14
  • 19
1

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

Jay
  • 18,959
  • 11
  • 53
  • 72
1

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

tenfour
  • 36,141
  • 15
  • 83
  • 142
  • Yes that would work. Would probably be quite tricky in our scenario though as new thumbnails are being created frequently (it's like a document mailbox system, with the thumbnails being previews of the documents in the mailbox). – cbp Aug 17 '12 at 03:19