Javascript 在另一个函数中预加载图像？

完全被简单的事情难倒了。。。我正在从阵列中预加载图像。下面代码中的所有内容都运行良好。每次加载图像后，我都会收到一条控制台日志消息。我的问题-如何知道所有图像何时完成加载？当最后一个图像加载时，如何调用函数

谢谢你的帮助

function function1(){

     for (i = 0; i < photoUrls.length; i++) {
         preloadPhoto(photoUrls[i]);
     }

}

function preloadPhoto(photoURL){

    $('<img class="preloadedImages"/>').attr('src', photoURL).appendTo('#front').css("width", "15%").load(function() {
        console.log('done loading image');
    });

}

函数function1（）{
对于（i=0；i
var preloadedCount = 0;

// Then further down inside your `.load` function

console.log('done loading image');
preloadedCount++;

if(preloadedCount == photoUrls.length){
  // All images have been preloaded
}

您需要有一个全局变量，它将保存到现在为止加载的照片记录

var totalPhotosloaded = 0;


function function1(){

     for (i = 0; i < photoUrls.length; i++) {
         preloadPhoto(photoUrls[i]);
     }

}

function preloadPhoto(photoURL){

    $('<img class="preloadedImages"/>').attr('src', photoURL).appendTo('#front').css("width", "15%").load(function() {
        console.log('done loading image');
        totalPhotosloaded++;
if(totalPhotosloaded == photoUrls.length){
//call your function here.
   }
  });       
}

var totalphotosload=0；
函数function1（）{
对于（i=0；i$（'保存一个计数器并在每张照片加载时检查它是一种方法

查看此plunkr:
我更愿意使用不同的技术来完成此操作。我将使用承诺来处理个人更新和组更新：

function preloadAllPhotos(photoUrls, afterEach){
    var promises = [], promise, afterEach = afterEach || $.noop;
    for (var i = 0; i < photoUrls.length; i++) {
        promise = preloadPhoto(photoUrls[i])
        promises.push(promise);
        promise.then(afterEach);
    }
    return $.when.apply(null, promises);
}

function preloadPhoto(photoUrl){
    var defer = $.Deferred();
    $('<img class="preloadedImages"/>').attr('src', photoUrl)
            .appendTo('#front').css("width", "15%").load(function() {
        defer.resolve(photoUrl);
    });
    return defer.promise();
}

您可以看到这个

这增加了一些额外的灵活性。事实上，我可能会更进一步，将DOM追加从加载代码中分离出来，但这是针对另一个线程的。
在for循环之后放置另一个console.log。@Moniecorleone:这没有帮助，因为这是异步的。
var logPhoto = function(photoUrl) {
    console.log('done loading image ' + photoUrl);
};

var logComplete = function() {
    // `arguments` contains all the photo urls
    console.log("done loading all photos")
};

preloadAllPhotos(photoUrls, logPhoto).then(logComplete);