完全难以理解......我正在从阵列中预加载图像。以下代码中的所有内容都运行良好。每次图像加载后我都会收到控制台日志消息。我的问题 - 怎么可能知道所有图像何时完成加载?如何加载最后一个图像时如何调用函数?
感谢您的帮助。
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');
});
}
答案 0 :(得分:0)
保持计数。
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
}
答案 1 :(得分:0)
你需要有一个全局变量来记录到目前为止加载的照片。
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.
}
});
}
答案 2 :(得分:0)
保持计数器并在每张照片加载时检查它是一种方法。
看看这个plunkr:http://plnkr.co/edit/rJsGgpRlnTyUf246aX6c?p=preview
答案 3 :(得分:0)
我宁愿用一种不同的技术来做这件事。我会使用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,但这是针对不同的线程。