javascript / jQuery: firefox зависает при вставке цикла DOM (показывать изображения по одному)

Question

У меня есть функция, которая запрашивает некоторые изображения с сервера и возвращает их в формате JSON. Я повторяю эти картинки (например, 150) и вставляю каждое изображение в div. Я хочу, чтобы изображения отображались по одному, но браузер показывает их все за один раз. Это приводит к зависанию Firefox. В Safari / Chrome производительность нормальная, но они также отображаются довольно медленно и не по одному.

Есть идеи? Вот мой код:

часть петли:

for (var i = 1; i < response.photos.length; i++) {
        var div = "a" + i;
        var subdiv = document.getElementById(div);
        var photo = response.photos[i-1]
        T.loadImage(photo, subdiv);
}

моя функция loadImage:

T.loadImage = function (photo, divv) {
    var subdiv = $(divv);
    var url = photo.url;
    var url_big = photo.url_big;
    if (url_big == undefined) {
        url_big = url;
    }

    subdiv.fadeOut();
    var identifier = subdiv.attr('class') + "x";

    var link = $("<a/>").attr("href", url_big).attr("id", identifier).appendTo(subdiv);
    var img = $("<img/>").attr("src", url).appendTo(link);
    img.imgCenter({parentSteps:1});

    subdiv.fadeIn();
};

Спасибо!

Answer 1

Возможно, вы можете немного переделать функцию загрузки изображения, чтобы воспользоваться функцией обратного вызова в fadeIn()

Пример:

var loadImage = function(photos, current) {

    if (current == count) {

        $("body").prepend((new Date() - startDate)/1000);
        return;
    }

    var div = $("<div id=a" + current + "></div>");
    $("body").append(div);
    var photo = photos[current];

    var url = photo.url;
    var url_big = photo.url_big;
    if (url_big === undefined) {
        url_big = url;
    }

    div.hide();
    var identifier = div.attr('class') + "x";

    var link = $("<a/>").attr("href", url_big).attr("id", identifier).appendTo(div);
    var img = $("<img/>").attr("src", url).appendTo(link);
    //img.imgCenter({parentSteps:1});
    div.fadeIn(5, function() {
        loadImage(photos, current + 1);
    });
};

loadImage(photos, current);

Пример использования jsfiddle .

Answer 2

Попробуйте использовать .each в jQuery вместо цикла for.

, например

$.each(response.photos,function(index,photo){
    T.loadImage(photo, $("#a" + index));
});

T.loadImage = function (photo, divv) {
    var url = photo.url;
    var url_big = photo.url_big;
    if (url_big == undefined) {
        url_big = url;
    }

    divv.fadeOut();
    var identifier = divv.attr('class') + "x";

    var link = $("<a/>").attr("href", url_big).attr("id", identifier).appendTo(divv);
    var img = $("<img/>").attr("src", url).appendTo(link);
    img.imgCenter({parentSteps:1});

    divv.fadeIn();
};