1

えーと、これについてはよくわかりません。しかし、ここに行きます:)

すべての.instagram-placeholdersが追加されたときにコールバックが必要です。しかし、どこで、どのように？

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

正しい方法は、JQueryまたはUnderscore each（）メソッドを使用してすべての要素を反復処理することです。

于 2012-08-10T11:28:36.817 に答える
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 に答える