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

尝试使用 jQuery 的 .each 而不是 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();
};