有没有办法知道何时从服务器下载了所有图像？ [复制]

Question

我有一个简单的 html 页面，我想在其中加载一堆图像。我想根据用户在屏幕上的光标显示其中一个。基本上我正在尝试做这样的事情：

http://test.vostrel.net/jquery.reel/example/object-movie-camera-sequence/

我分两步执行此操作，第一步是加载低分辨率图像（在不到两秒的时间内加载 60 张图像），第二步是当用户第一次点击时，我将低分辨率换成高分辨率图片（大约 10 秒内 60 张图片）。

这是我的两个功能：

function loadImages() {
    var imagesDOM;
    for (var j = 0 ; j < directoriesNumber ; j++) {
        imagesDOM = new Array();
        for (var i = 1 ; i < imageNumber + 1 ; i++) {
            images[i] = imageDirectory[j] + "/" + imageBasename + twoDigits(i) + imageExtension;
        }
        for (var i = 1 ; i < imageNumber + 1 ; i++) {
            imagesDOM[i] = new Image();
            imagesDOM[i].id = "image" + j + "_" + i;
            imagesDOM[i].src = images[i];
            $("#cadre").append(imagesDOM[i]);
        }
    }
}

function loadImagesHigh() {
    for (var j = 0 ; j < directoriesNumber ; j++) {
        for (var i = 1 ; i < imageNumber+1 ; i++) {
            images[i] = imageDirectoryHigh[j] + "/" + imageBasename + twoDigits(i) + imageExtension;
        }
        for (var i = 1 ; i < imageNumber+1 ; i++) {
            $("#image" + j + "_" + i).attr("src",images[i]);
        }
    }
}

所以问题是如何在客户端监控图片的下载：60 张图片中有 4 张已加载，请稍候...

我已经检查过了： Is there a way to determine when 4 images have been loaded using JS? 但是src是写在html里的。

解决方案，感谢 Aaron Digulla，就像在为 src 分配值之前添加以下事件侦听器一样简单：

    $(imagesDOM[i]).load(function () {
            console.log("loaded");
        }
    );

感谢阅读。

Answer 1

在为src 赋值之前，将事件侦听器附加到图像。您需要两个全局变量，其中包含图像总数和已加载的图像数。

问题Is there a way to determine when 4 images have been loaded using JS? 包含几个示例，事件侦听器的外观。

[EDIT] OP 终于用上了

$(imagesDOM[i]).load(function () {console.log("loaded")});

Answer 2

我最近不得不做类似的事情，并且我对手动使用 jQuery 延迟对象感到非常兴奋。原理如下：

//specify imgs to load and create a jQuery deferred object for each
var
imgs_to_load = ['foo', 'bar', 'foo2', 'bar2'], //etc
dfds = imgs_to_load.map(function() { return new $.Deferred; });

//wait for each img to load and resolve its corresponding deferred
imgs_to_load.forEach(function(filename, i) {
    var img = $('<img />', {src: filename+'.jpg'}).on('load', function() {
        dfds[i].resolve();
    });
});

//when all imgs loaded, do something
$.when.apply(null, dfds).then(function() { alert('all done'); });

因此，我们为要加载的每个图像创建一个延迟对象。当图像加载时，我们手动解决它，当所有延迟都解决后，我们继续前进。