Загрузка и добавление изображений постепенно - PullRequest
Новая
       27

Загрузка и добавление изображений постепенно

3 голосов
/ 07 марта 2011

У меня есть проблема, с которой я не могу справиться.Я сделал простую галерею альбомов jQuery и у меня есть эта функция: 

function loadAlbum (index) {
    for (var j=1; j < xmlData[index].length; j++) {

        var img = new Image();

        $(img).load(function() {
                    $(this).hide();
                    $('#album'+index+' .photoContainer').append(this);
                    $(this).fadeIn();
                })
                .error(function(){
                    //alert("Could not load one or more photo!");
                })
                .attr({
                    'src': xmlData[index][j],
                    'id': 'img'+index+j,
                    'class': 'photoFrame',
                    'width': newW,
                    'height': newH
                })
                .css({
                    'width': newW,
                    'height': newH
                });
    };
};

Теперь, как вы можете видеть, все изображения src импортированы из внешнего XML-файла, содержащего данные (имена изображений являются прогрессивными, напримерphoto001.jpg, photo002.jpg и так далее).

Они создаются в DOM через цикл for и добавляются в div.

Какую проблему вы можете сказать?Мне нужно, чтобы все изображения добавлялись постепенно, как указано в данных XML, но это происходит только на локальном компьютере, а не при загрузке на какой-либо сервер.Я понимаю, что это связано с разным временем загрузки каждого изображения в зависимости от размера ... но я все еще не могу понять, как это обойти.У кого-нибудь есть идеи?

1 Ответ

7 голосов
/ 07 марта 2011

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

function loadAlbum(index) {
    var i = 0;
    var j = xmlData[index].length;
    function loadImage() {
         if (i >= j) return;

         // do what you're doing in the loop except for ....
         $(img).load(function() {
             $(this).hide();      
             $('#album'+index+' .photoContainer').append(this);
             $(this).fadeIn();
             // increments i by 1 and calls loadImage for the next image.
             i++;
             loadImage();
         // etc.
    }
    loadImage();
}

Я оставляю за вами определение того, как можно загружать несколько изображений одновременно, и при этом сохранять порядок:)

...