我不想同时预加载我的图像了,我想一个接一个地加载它们。到目前为止,我是这样做的:
for (var i = current; i < current + 5; i++) {
images[i].load();
}
所以我开始思考如何使用回调来顺序加载它们:我可以传递一个回调给load(callback)
,它将在一个图像加载后被调用。所以我也可以这样做它们会依次加载:
images[current].load(function(){
images[current + 1].load(function(){
images[current + 2].load(function(){
images[current + 3].load(function(){
images[current + 4].load();
});
});
});
});
这个可以工作,但是我想把它转换成一个循环。我不能绞尽脑汁去实现这个目标。你能帮忙吗?
我只能提供我的load(callback)
方法的一个例子,因为它太长了:
load = function(callback){
// do preloading things and simulate load event:
setTimeout(function(){
callback.apply(this);
}, 1000);
}
这里有一个测试方法:http://jsfiddle.net/ajuc7g1q/1/
可能是递归函数?
function loadImages(){
var images = [img1, img2, ...];
loadImage(images);
}
function loadImage(images){
if(images.length){
images.shift().load(function(){
loadImage(images);
});
}
}
我刚刚想出了递归的方法:
var call_chain = function(){};
for(var i = current + 5; i >= current; i--){
(function(f, index){
call_chain = function(){
images[index].load(f);
};
})(call_chain, i);
}
call_chain();