Javascript 在jQuery中预先缓存不同数量的图像，并在所有图像都已加载时回调

我想做一个动画的图像，但只有当他们都加载。 当我在图像仍在加载的情况下启动动画时，它看起来很糟糕

通过在$（document.ready）上解析javascript请求的json，可以将图像动态添加到dom中

在图像加载后，我想得到一个回调

我的核心代码如下：

$('.gallery-block').each(function () {
    $.ajax({
        url: $(this).data("url"),
        dataType: 'json',
        outerthis: this,
        success: function (json) {
            $(this.outerthis).data("json", json);
            var i = json.length;
            while (i--) {
                var preload = new Image();
                preload.src = json[i];
            }
            $(this.outerthis).data("loaded", "true");
        }
    });
});

正如你所看到的，我正在尝试预加载图像，但我不知道这样的图像有多变化无常。它们没有附加到dom或任何东西

另一个问题是我在排队

$(this.outerthis).data("loaded", "true");

仅在图像真正预加载时执行

我应该在每个图像的回调上迭代一个变量吗

---

也许this.outerthis是一种糟糕的设计模式，但我对javascript还不熟悉。

图像不需要连接到要加载的DOM。您可以做的是将一个onload事件连接到每个图像（在设置URL之前），它将充当您的回调。只需计算一下onload的响应数，就可以知道它们何时都已加载

类似这样（未经测试）：

var i，图像，
预加载=[]，加载=0，
images=[“a”，“b”]，count=images.length；
对于（i=0；i

清理了一下代码，因为它让我有点痒。。。O:-）这个解决方案几乎可以工作，尽管chrome仍在某种程度上“垃圾收集”或对图像进行类似的处理。如果我能让它在chrome中工作，我会接受这个答案。你认为chrome在做什么？当我将img.src设置为应该缓存的图像url时，它仍然不会立即显示，但在300-400毫秒的延迟后，这大约是图像下载所需的时间。加载Firebug，打开NET选项卡，查看加载的内容。

var i, image,
    preload = [], loaded = 0, 
    images = ["a", "b"], count = images.length;

for(i = 0; i < count; i++) {
    image = new Image();
    image.onload = onImageLoaded;
    image.src = images[i] + ".jpg";
    preload[i] = image;
}

function onImageLoaded() {
    loaded++;
    if(loaded === count) {
       alert("done");
    }
}