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 ".