使用排队预加载图像？ [英] Preload images with queuing?

问题描述

我正在寻找的是一种在队列中预先加载和碰撞特定图像的方法。

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

这是我到目前为止所处的位置：< a href =http://shivimpanim.org/testsite/imageloader.html =nofollow> http://shivimpanim.org/testsite/imageloader.html

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

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

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?)

换句话说，可能是自然image10朝向预加载队列的末尾......但它可能是用户在开始时盘旋的位置。所以image10应该碰到队列的顶部并立即加载。完成后，队列应该从中断处继续加载。

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.

谢谢！

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

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

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

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

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

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 :)

我没有进行过广泛测试 - 但是在firebug中看起来有些正常： ）

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

推荐答案

这样的事情（未经测试）：

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

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

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.

这篇关于使用排队预加载图像？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！