Прекашируйте различное количество изображений в jQuery и перезвоните, если все загружены - PullRequest
Новая
       16

Прекашируйте различное количество изображений в jQuery и перезвоните, если все загружены

2 голосов
/ 11 января 2012

Я хотел бы сделать анимацию с изображениями, но только когда они все загружены.Когда я запускаю анимацию с изображениями, которые все еще загружаются, она выглядит плохо.

Изображения динамически добавляются в dom путем анализа json, запрошенного javascript для $ (document) .ready.

ПослеИзображения загружены. Я хотел бы получить обратный вызов.

мой основной код выглядит так: 

$('.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.

1 Ответ

3 голосов
/ 11 января 2012

Изображения не должны быть подключены к 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");
    }
}
...