0

JSON で埋められている間、動的に埋められたコンテンツ div (#photographs) を非表示にしようとしています。

$(window).load(function() { 

$("#loader").fadeIn("fast");

$.getJSON('http://api.flickr.com/services/rest/?format=json&method=flickr.photosets.getPhotos&photoset_id=' + photoset_id + '&per_page=1000' + '&page=1' + '&api_key=' + apiKey + '&user_id=' + userId + '&jsoncallback=?', function(data) {
    var fullPhotoURL, flickrLink;

    $.each(data.photoset.photo, function(i, flickrPhoto){
        var basePhotoURL = 'http://farm' + flickrPhoto.farm + '.static.flickr.com/'
        + flickrPhoto.server + '/' + flickrPhoto.id + '_' + flickrPhoto.secret + "_z.jpg";  

        var fullPhotoURL = 'http://farm' + flickrPhoto.farm + '.static.flickr.com/'
        + flickrPhoto.server + '/' + flickrPhoto.id + '_' + flickrPhoto.secret + "_l.jpg";          

        $("<img/>").attr("src", basePhotoURL).appendTo("#photographs").wrap(("<div class='item'></div>"))
    });

    $("#loader").fadeOut("fast");

});
});

もちろん、上記はある程度機能します。ロード アニメーション (#loader) はロード時にフェード インし、JSON 呼び出しが開始されるとフェード アウトします。私が必要としているのは、ロード中に写真が表示されないことです (したがって、#photographs on display: none を設定します)。すべてがロードされた後、# loader はフェードアウトします (もちろん写真も)。

何か案は？

4

1 に答える 1

0

すべての写真をロードするまで、#photographs に img タグを追加するのを待ちませんか?

例えば

$.getJSON(...) {
  var images = [];

  $.each(data.photoset.photo, function(i, flickrPhoto){
     ...
     images.push($("<img/>").attr("src", basePhotoURL));
  });
  $.each(images, function(index, img) {
     img.appendTo("#photographs").wrap(("<div class='item'></div>"));
  });
});
于 2012-12-27T14:18:04.737 に答える