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?包含几个事件监听器的示例。

[编辑] 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'); });

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

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

2 个答案: