0

我试图隐藏动态填充的内容 div (#photographs)，而它正在由 JSON 填充。

$(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 会淡出（当然图片也是如此）。

有任何想法吗？

4

1 回答 1

0

为什么不等到加载所有照片后再将 img 标签附加到#photographs？

例如

$.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 回答