Question

Erhm - 对此不确定。但是这里有:)

我想在添加所有.instagram-placeholder时进行回调。但是在哪里，以及如何？

success: function(data) {
    for (var i = 0; i < 30; i++) {
        $("#instaWrap").append("<div class='instagram-placeholder'><a target='_blank' href='" + data.data[i].link +"'><img class='instagram-image' src='" + data.data[i].images.thumbnail.url +"' /></a></div>");
        total += 1; 
    }; 
    $("#instaWrap").append('<div class="clear"></div>');
}

非常感谢:)

Answer 1

一个简单的答案是：

success: function(data) {
    for (var i = 0; i < data.data.length; i++) {
        $("#instaWrap").append("<div class='instagram-placeholder'><a target='_blank' href='" + data.data[i].link +"'><img class='instagram-image' src='" + data.data[i].images.thumbnail.url +"' /></a></div>");
        total += 1; 
    }; 
    $("#instaWrap").append('<div class="clear"></div>');
    callback(); // just call the callback :)
}

但是如果你想等到加载所有图像，你可以尝试这种方法：

success: function(data) {
    imagesLoaded = 0;
    imagesToLoad = data.data.length;
    $.each(data.data, function() {
        // Create the elements:
        var el = $("<div class='instagram-placeholder'><a target='_blank' href='" + this.link +"'><img class='instagram-image' src='" + this.images.thumbnail.url +"' /></a></div>");
        // Bind load and error event of the image
        $('img', el).bind('load error', function() {
            if (++imagesLoaded == imagesToLoad) {
                callback(); // all images have been loaded
            }
        });
        // Append the element to the DOM
        $("#instaWrap").append(el);
        total += 1;
    });
    $("#instaWrap").append('<div class="clear"></div>');
}

Answer 2

正确的方法是使用JQuery或Underscore each（）方法迭代所有元素。

Answer 3

作为@WouterH的附件：

为什么不使用数据阵列来计算项目总数？如果数据在其列表中只有28个项目怎么办？你会得到错误的。

for (var i = 0; i < data.count(); i++) { [...] }

或者，即使是较短的版本，您也可以尝试以下方式：

$.each(data.data, function() {
    $("#instaWrap").append("<div class='instagram-placeholder'><a target='_blank' href='" + this.link +"'><img class='instagram-image' src='" + this.images.thumbnail.url +"' /></a></div>");
});

代码是直接从大脑写的 - 这是一个例子。你可以尝试这样的事情。

Answer 4

DOM是一个同步API，因此您不需要任何回调：立即添加元素。

现在，如果您想等到加载所有图像，您可以使用恰当命名的load事件：

success: function(data) {
  var total = 0,
      loading = 0;

  for (var i = 0; i < 30; i++) {
    var img = $(<img>).addClass('instagram-image').attr('src', data.data[i].images.thumbnail.url);

    img.on('load error', function() {
      loading -= 1;

      if(loading === 0)
        allImagesLoaded();
    });

    $("#instaWrap").append(
      $('<div>').addClass('instagram-placeholder').append(
        $('<a>').attr('target', '_blank').attr('href', data.data[i].link).append(
          img
        )
      )
    );

    total += 1;
    loading += 1;
  }; 

  $("#instaWrap").append('<div class="clear"></div>');
}

然而，正如jQuery's doc所说：

与图像一起使用时加载事件的注意事项

开发人员尝试使用.load（）解决的常见问题   快捷方式是在图像（或集合）时执行函数   图像）已完全加载。有几个已知的警告   这应该注意。这些是：


它不能一致地工作，也不能可靠地跨浏览器。

如果图像src设置为与之前相同的src，则无法在WebKit中正确触发

它没有正确地冒泡DOM树

可以停止触发已存在于浏览器缓存中的图像

Jquery回调for

4 个答案: