Question

完全难以理解......我正在从阵列中预加载图像。以下代码中的所有内容都运行良好。每次图像加载后我都会收到控制台日志消息。我的问题 - 怎么可能知道所有图像何时完成加载？如何加载最后一个图像时如何调用函数？

感谢您的帮助。

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

}

Answer 1

保持计数。

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
}

Answer 2

你需要有一个全局变量来记录到目前为止加载的照片。

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

Answer 3

保持计数器并在每张照片加载时检查它是一种方法。

看看这个plunkr：http://plnkr.co/edit/rJsGgpRlnTyUf246aX6c?p=preview

Answer 4

我宁愿用一种不同的技术来做这件事。我会使用promises来处理个人更新和第一组：

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();
}

然后您可以像这样使用它：

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

您可以看到 in action on JSFiddle 。

这增加了一些额外的灵活性。事实上，我可能会更进一步，从这个加载代码中分离出DOM，但这是针对不同的线程。

图像预加载另一个功能？

4 个答案: