javascript/jQuery:firefox挂起DOM循环插入（逐个显示图像）

我有一个函数，它从服务器请求一些图像，并以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);
}

for（var i=1；i

我的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();
};

T.loadImage=函数（照片，divv）{
var subdiv=$（divv）；
var url=photo.url；
var url_big=photo.url_big；
如果（url_big==未定义）{
url\u big=url；
}
细分衰减（）；
变量标识符=subdiv.attr（'class'）+“x”；
var link=$（“”）.attr（“href”，url\u big）.attr（“id”，identifier）.appendTo（subdiv）；
变量img=$（“
谢谢！
尝试使用jQuery的
。每个
而不是
for
循环

e、 g

$。每个（响应、照片、函数（索引、照片）{
T.loadImage（照片，$（#a+索引））；
});
T.loadImage=函数（照片，divv）{
var url=photo.url；
var url_big=photo.url_big；
如果（url_big==未定义）{
url\u big=url；
}
divv.fadeOut（）；
变量标识符=divv.attr（'class'）+“x”；
var link=$（“”）.attr（“href”，url\u big）.attr（“id”，identifier）.appendTo（divv）；
var img=$（“也许您可以稍微修改一下load image函数，以利用
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);

var loadImage=函数（照片，当前）{
如果（当前==计数）{
$（“正文”）.prepend（（新日期（）-startDate）/1000）；
返回；
}
var div=$（“”）；
$（“正文”）。追加（div）；
var photo=照片[当前]；
var url=photo.url；
var url_big=photo.url_big；
如果（url_big==未定义）{
url\u big=url；
}
隐藏分区（）；
变量标识符=div.attr（'class'）+“x”；
var link=$（“
不幸的是，这不起作用。Firefox仍然试图一次加载所有东西。我问过一位在linux/windows上工作的朋友，对他来说，它在Firefox上工作。我在Mac上工作，我有一个愚蠢的加载Mac lollypop图标：）…知道为什么吗？这是我需要的，但我应该更快地迭代它们…我尝试过将div.fadeIn（）更改为div.show（），持续时间为0毫秒，但速度不快。我想在2秒钟内填满我的屏幕（对于150张图片）…使用上述方法是否可行？谢谢。请参阅更新，为示例添加了一个durration，在大约2秒钟内显示150个附加图像。如果加载仍然存在问题，请给我一个示例图像或尺寸，我可能可以调整它一点，以便按照您的需要加载。它工作了！太好了！谢谢。并且在所有方面都非常平滑我测试过的浏览器（IE8、Firefox、Chrome、Safari）。
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);