Скрыть содержимое JSON при загрузке

Я пытаюсь скрыть свой динамически заполняемый элемент содержимого (#фотографии), пока он заполняется 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 on display: none?), и после того, как все загрузится, #loader исчезнет (и изображения тоже конечно).

Есть идеи?


json jquery preload
person Mathijs Delva    schedule 27.12.2012    source источник
comment
Почему бы не использовать итерацию each внутри обратного вызова GET $.ajax?   -  person the_marcelo_r    schedule 27.12.2012
comment
Разве это еще не в обратном вызове json? Я немного смущен; Вы имеете в виду «успех» в вызове JSON?   -  person Mathijs Delva    schedule 27.12.2012

Ответы (1)


arrow_upward
0
arrow_downward

Почему бы вам не подождать, добавив теги img к фотографиям, пока вы не загрузите все фотографии?

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>"));
  });
});
person asgoth    schedule 27.12.2012
comment
Это выглядит лучшим решением. Только firebug говорит, что img.appendTo не является функцией. - person Mathijs Delva; 27.12.2012
comment
Извините, должно было быть... $.each(images, function(index, img) {... (добавлен индекс в параметры функции). Обновлен мой ответ - person asgoth; 27.12.2012
comment
Спасибо за ваши усилия, но, похоже, это не имеет никакого эффекта. Все мои изображения все еще заметно загружаются (медленно); что еще хуже, добавление переключателя для фотографий div fadeIn fadeOut также не имеет никакого эффекта. - person Mathijs Delva; 27.12.2012