Technique for prioritizing image loading in a web browser

Question

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

The problem occurs when the user opens a popup before all 100+ thumbnails finish loading on the parent page. The user must now wait a long time before they can see the large image in the pop-up window, because the browser does not know how to prioritize this new image over the thumbnails that it is already trying to extract.

Any thoughts on solving this problem?

Answer 1

When this page loads, the browser queues 100 requests for these thumbnails. I do not know how to remove items from the request queue. Depending on the browser, it can request up to 6 at the same time (referring to this stream ), but they will still queue in front of your large image of the modal dialog. What you can do (from the same thread) is to place modal dialog images in a separate subdomain, so the browser puts them in a separate queue, as if they were on completely different sites. This new queue will run simultaneously with your thumbnail requests.

Answer 2

You can use the BASE64 URI for all small images. Your page may become larger, but in some settings - loading the entire page has become faster.

Another option is to load a large image from another subdomain, since the “queue” is by hostname.

Answer 3

Interest Ask. I have never encountered such a situation. The workaround that comes to mind is to download thumbnails only when the user views them.

If you use jQuery, you can try using this plugin:

Lazy Load Plugin for jQuery

Answer 4

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