Question

我想用图像做动画，但只有当它们都被加载时才会动画。当我开始加载图像的动画时，它看起来很糟糕。

通过在$（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");

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

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

可能就是这个。这是一个糟糕的设计模式，但我是javascript的新手。

Answer 1

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

像这样（未经测试）：

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

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

1 个答案: