Question

I would like to do an animation with the images, but only when they are all loaded. When I start the animation with images still loading, it looks bad.

这些图像通过按javascript要求按美元(文件)分类,在大地上加起来。准备就绪。

在图像被装上后,我要回击。

我的核心法典就是这样:

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

你可以看到Im试图上载图像,但我不知道这些图像是怎样的。他们不附属于主角或任何东西。

另一个问题是,我 line一线。

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

只有在图像真正上载时才能执行。

Should I iterate a variable on every image s callback?

很可能是这样。外部是不良的设计模式,但我是新鲜的。

Answer 1

The images don t need to be connected to the DOM to be loaded. What you can do is hook up an onload event to each image (before you set the URL), which will acts as your callback. Just count up the number of responses to onload and you can figure out when they re all loaded.

与此类似(未测试):

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

友情链接