使用排队预加载图像？

Question

我正在寻找一种在队列中预加载和提升特定图像的方法。

这是我目前所处的位置：http://shivimpanim.org/testsite/imageloader.html

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

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

谢谢！

编辑：我现在更新了代码，以便预加载工作......主要的“陷阱”是必须将图像添加到 DOM 以便 onLoad 才能在 Mac 上的 firefox 中触发，以及我特别需要跟踪沿途的原始索引（以匹配标题等）

似乎可以工作.. 但奇怪的是，第二个项目的顺序很奇怪（它在自动模式下在项目 #2 之前加载项目 #3）。

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

我没有进行广泛的测试——但在萤火虫中看起来有些正常:)

Answer 1

类似这样的东西（未经测试）：

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' );

为了使其正常工作，您也不能在页面加载时将所有图像添加到 dom。您需要按需添加它们。