javascript - 如何使用 jquery 和 ajax 淡入图像

Question

我从 API 请求图像 (30)，而不是将每个图像直接加载到 DOM 中，我想利用 JQuery 的 fadeIn() 优雅地将每个图像淡入 View 中。无法让它工作。

我需要使用load()(或live())吗？下面的代码可以从 API 中获取图像，将它们放入一个新的 div 中，然后将其附加到 #wrapper - 问题是它将它们全部转储进去，而我想如上所述淡化每个图像。

success: function(result) {
    for (var i = 0, l = 30; i < l; i++) {
        var media = result.data[i];
        var imageString = //bits for inside the div;
        var newdiv = document.createElement('div');
        newdiv.className = "imageHolder";
        newdiv.innerHTML = imageString;

        $('#wrapper').append(newdiv);
    }
}    
$('img').load(function() {
$('.imageHolder').fadeIn();
});     

我确信这很简单，但我就是无法破解它。

编辑:认为以下内容可能有效。没有喜悦。我很高兴淡入包含图像的 div，或者只是图像本身，只要小吸盘淡入...欣赏迄今为止的建议

    success: function(result) {
        for (var i = 0, l = 30; i < l; i++) {
            var media = result.data[i];
            var imageString = '<a href="#" onClick="getBigOne(\'' + media.id + '\')"><img class="inst" src="' + media.images.thumbnail.url + '"></a>';
            $('<div class="imageHolder">')
                .append(imageString)
                .prependTo('#wrapper')
                .load(function () {
                  $(this).fadeIn();
                })
        }

Answer 1

我会尝试一些类似的方法(尽管我不确定它是否适用于这些内容在您网站中的显示方式):

function fadeImagesIn(i) {
    $('#wrapper .imageHolder').eq(i).fadeIn(600,function() {
                                                fadeImagesIn(i+1);
                                            });
}

//ajax here
success: function(result) {
    for (var i = 0, l = 30; i < l; i++) {
        var media = result.data[i];
        var imageString = //bits for inside the div;
        var newdiv = document.createElement('div');
        newdiv.className = "imageHolder";
        newdiv.innerHTML = imageString;

        $('#wrapper').append(newdiv);
    }
    fadeImagesIn(0);
}

注意:未经测试