How do I best prioritize HTTP requests on a web page?

Question

I need to prioritize the downloading of (in my case) images.

To do this I would prefer to use some kind of plugin (preferably for jQuery) that lets me do this without having to build my own downloadqueue mechanism.

Consider this scenario:

You have a web page. Your web page is able to show a given user three images. These images are only shown one at a time at the users request.

You would then ideally want to load the images from top to bottom until the user makes a selection. You would then want his selection to move up the queue and become next in line (with every selection he makes).

Of course in a page with only three images this isn't really a problem, but with more and more images it becomes important.

I am currently only using background-image to show images and would like to keep it that way.

Oh, and also, I would like a "spinner.gif" to show while an image is loading.

Any suggestions?

Thanks.

UPDATE I ended up making my own queueing system based on this: http://jqueryfordesigners.com/image-loading/

Answer 1

Assuming the actual page will have a lot more than three images, take a look at this image Lazy Load Plugin . It's based around what is and what is not below the fold, works sequentially through the images, and can be configured to preload in X ones below the fold as you are scrolling. It allows for a placeholder image but might need some rewriting if you want it to expose background images rather than working on actual img tags.

Answer 2

Here's an example of loading 'on-demand' or when scrolled into view. Though not directly answering your question but is fundamentally similar.

http://www.webresourcesdepot.com/dnspinger/

Try scrolling down and the page gets loaded with my content. Will work for images as well. The resource for this demo can be found at "Load Content While Scrolling With jQuery".