Question

我正试图在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显示：无？），一切都加载后，＃loader淡出（和图片）当然也是。）

有什么想法吗？

Answer 1

在你加载所有照片之前，为什么不等待将img标签附加到#photographs？

E.g。

$.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>"));
  });
});

加载时隐藏JSON内容

1 个答案: