Q:

javascript/jQuery: firefox hangs on DOM loop insertion (show images one by one)

I have a function that requests some images from a server and returns these in a JSON format. I iterate these pictures (like 150) and insert each image in a div. I want the images to show up one by one, but the browser shows them all in one time. This makes Firefox hang.. In Safari/Chrome, the performance is OK, but they also show up pretty slow and not one at a time.
Any ideas? Here's my code:
loop part:
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);
}

my loadImage function:
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();
};

Thanks!

A:

Maybe you can could rework your load image function a bit to take advantage of the callback function in fadeIn()
Example:
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);

Example on jsfiddle.

