Preload images with queuing?

Question

What I'm looking for is a way to preload and bump a specific image up in the queue.

Here is where I'm at so far: http://shivimpanim.org/testsite/imageloader.html

You can see it has image preloading, but there is no queue management as far as I can tell (or does the browser intelligently bump up the requested image in the queue if it's newly written to the DOM?)

In other words- it might be that naturally image10 is towards the end of the preload queue... yet it might be where the user hovers over right at the beginning. So image10 should be bumped to the top of the queue and immediately loaded. When finished, the queue should continue loading from where it left off.

Thanks!

EDIT: I've now updated the code so that preloading works... the main "gotchas" were that the image must be added to the DOM for onLoad to trigger in firefox on Mac, and my specific need to keep track of the original index along the route (to match title, etc.)

Seems to work.. but strangely, the order of the second item is weird (it loads item #3 before item #2 in auto-mode).

But all in all- it auto-loads mostly in the correct order 2 items at a time, and when the user hovers over a link it bumps that item into the queue and then shows it upon load :)

I haven't tested extensively- but in firebug things look somewhat normal :)

I'm actually not sure what you're asking. Do you just want to learn how to show a gif while your image is loading? — vinceh
– vinceh, Commented Jul 15, 2011 at 5:28
Please provide more information. What have you tried? Where are you stack? — SO is not a code factory, you'll have to show some initiative as well. — polarblau
– polarblau, Commented Jul 15, 2011 at 10:14

user578895 · Accepted Answer · 2011-07-15 15:42:47Z

Something like this (untested):

function loader( images, n_parallel ){ this.queue = images.slice( 0 ); this.loading = []; for( var i=0; i<n_parallel; i++ ) this.dequeue(); } loader.prototype.dequeue = function(){ if( !this.loading.length ){ return; } var img = new Image(), self = this; img.src = this.queue.unshift(); if(img.width){ self.dequeue(); }else{ img.onload = function(){ self.dequeue(); } } } loader.prototype.promote = function( src ){ for(var i=0, l=this.queue.length; i<l; i++){ if(this.queue[i] == src){ this.queue.unshift( this.queue.splice(i, 1)[0] ); break; } } } var imgs = new loader( ['foo.jpg', 'bar.jpg', 'foobar.jpg', ...], 2 ); ... imgs.promote( 'some_img.jpg' );

In order for this to work, you can't also add all of the images to the dom on page load. You need to add them on-demand.

didn't work for me... though I'm upvoting your answer since it did point me in a direction that helped :)
Inspired by this and by fragged.org/…, I whipped out my own. Feel free to comment, fork, or use:github.com/Synclop/PicLoader

Collectives™ on Stack Overflow

Preload images with queuing?

1 Answer 1

3 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Linked

Related