Question

完成所有操作后，我正在尝试通过回调从数组中预加载图像。我在这里可以找到很多解决方案，这些解决方案使我可以到达想要的位置，但是这些解决方案都无法同步工作并允许我使用。

我下面的代码很好用，但是所有代码都是异步加载的。我还有另一个脚本可以按顺序执行此任务，但是一旦数组中的所有项目都完成了，我似乎无法触发回调。下面的代码允许在函数外部进行用户定义的回调，这是我需要的，因为我将在不同的数组上调用此函数。

我想做的是预加载一个图像阵列，检查先前存储在变量中的时间戳比较，以查看网络是否运行缓慢，然后（如果网络运行缓慢）预加载第二个图像阵列当第一个数组完成后，使用相同的预加载函数，然后在第二个数组完成后触发我的图像幻灯片功能。这是为了避免在最初加载足够的图像之前开始我的图像幻灯片放映-如果可以的话，可以避免空白幻灯片。

有效但只能异步执行的代码：

function preload(arr){
var newimages=[], loadedImages = 0;
var postaction=function(){}
var arr=(typeof arr!="object")? [arr] : arr;
function imageloadpost(){
    loadedImages++;
    if (loadedImages==arr.length){
        postaction(newimages); //call postaction and pass in newimages array as parameter
    }
}
for (var i=0; i<arr.length; i++){
    newimages[i]=new Image();
    newimages[i].src=arr[i];
    newimages[i].onload=function(){
        imageloadpost();
    }
    newimages[i].onerror=function(){
        imageloadpost();
    }
}
return { //return blank object with done() method
    done:function(f){
        postaction=f || postaction; //remember user defined callback functions to be called when images load
    }
}

}

我想要的采样结果是：

图片1 ...已加载，然后...
图片2 ...已加载，然后...
图片3 ...已加载，然后...
回调：全部已加载-做其他事情

更新：

这是同步代码，它等待第一个图像加载，然后再次为第二个和第三个等触发功能。这是我想要的行为，但是当所有项都在其中时似乎无法使回调起作用数组已加载。

function preload(arrayOfImages, index) {
index = index || 0;
if (arrayOfImages && arrayOfImages.length && arrayOfImages.length > index) {
    var img = new Image();
    img.onload = function() {
        preload(arrayOfImages, index + 1);
    };
    img.onerror = function() {
        preload(arrayOfImages, index + 1);
    };
    img.src = arrayOfImages[index];
}
$j('#slide-' + index + '').addClass('loaded');
}

Javascript-如何同步预加载图片，然后在图片全部加载后回调

0 个答案: