Javascript 使用队列预加载图像？

我要寻找的是一种预加载并在队列中添加特定图像的方法

以下是我目前的情况：

您可以看到它具有图像预加载功能，但据我所知，它没有队列管理（或者，如果请求的图像是新写入DOM的，浏览器是否会智能地在队列中增加该图像？）

换句话说，可能是image10自然接近预加载队列的末尾。。。然而，它可能是用户在开始时悬停的地方。因此，应该将image10放到队列的顶部并立即加载。完成后，队列应继续从停止的位置加载

谢谢

编辑：我现在已经更新了代码，以便预加载工作正常。。。主要的“陷阱”是，必须将图像添加到DOM中，以便在Mac上的firefox中触发onLoad，并且我特别需要沿着路径跟踪原始索引（以匹配标题等）

似乎有用。。但奇怪的是，第二项的顺序很奇怪（在自动模式下，它在第2项之前加载第3项）

但总而言之，它会以正确的顺序一次自动加载2个项目，当用户将鼠标悬停在链接上时，它会将该项目插入队列，然后在加载时显示：）

我没有进行过广泛的测试，但在firebug中，情况看起来有些正常：）

类似这样的测试（未测试）：

函数加载器（图像，n_并行）{
this.queue=images.slice（0）；
this.loading=[]；
对于（var i=0；我实际上不知道你在问什么。你只是想学习如何在加载图像时显示gif吗？请提供更多信息。你尝试过什么？你在哪里堆叠？-因此不是代码工厂，你也必须表现出一些主动性。用我目前所处位置的示例代码澄清：）虽然我对你的答案投了赞成票，因为它确实为我指明了一个有帮助的方向：）正如我所说的——未经测试，但应该非常接近：）受此启发，我自己提出了自己的答案。请随意评论、分叉或使用：
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' );