[英]Preload images with queuing?
我正在寻找的是一种在队列中预加载和提升特定图像的方法。
这是我到目前为止的位置: http://shivimpanim.org/testsite/imageloader.html
您可以看到它具有图像预加载功能,但据我所知没有队列管理(或者如果新写入 DOM,浏览器是否会智能地将请求的图像添加到队列中?)
换句话说-它可能是自然地 image10 接近预加载队列的末尾......但它可能是用户在开始时将鼠标悬停的位置。 所以 image10 应该被撞到队列的顶部并立即加载。 完成后,队列应该从停止的地方继续加载。
谢谢!
编辑:我现在已经更新了代码,以便预加载工作......主要的“陷阱”是必须将图像添加到 DOM 以便 onLoad 在 Mac 上的 firefox 中触发,我特别需要跟踪原始沿途的索引(匹配标题等)
似乎工作..但奇怪的是,第二个项目的顺序很奇怪(它在自动模式下在项目 #2 之前加载项目 #3)。
但总而言之-它一次主要以正确的顺序自动加载 2 个项目,当用户将鼠标悬停在一个链接上时,它会将该项目撞到队列中,然后在加载时显示它:)
我没有进行广泛的测试——但在萤火虫中,事情看起来有些正常:)
像这样的东西(未经测试):
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 中。 您需要按需添加它们。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.