1

嗯 - 不确定这个。但是这里有:)

添加完所有 .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>');
}

非常感谢:)

4

4 回答 4

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>');
}
于 2012-08-10T11:27:44.197 回答
0

作为@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>");
});

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

于 2012-08-10T11:33:24.050 回答
0

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 的文档所说：

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

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

  • 它不能始终如一地工作，也不能可靠地跨浏览器。
  • 如果图像 src 设置为与以前相同的 src，它不会在 WebKit 中正确触发
  • 它没有正确地冒泡 DOM 树
  • 可以停止对已经存在于浏览器缓存中的图像进行触发
于 2012-08-10T11:40:01.327 回答
0

正确的方法是使用JQuery或Underscore each() 方法来迭代所有元素。

于 2012-08-10T11:28:36.817 回答