0

JSONを介して画像を#photographsに読み込んでいます。最初に10ショットをロードし、特定のポイントまでスクロールダウンすると（ウェイポイントを使用して）、JSONフィードを「更新」して、追加の5ショットがロードされるようにする必要があります。これには、JSONURLで//＆per_page ='+itemsLoaded//を使用しています。ウェイポイントがヒットするたびに+5で更新されるのはvaritemsLoadedです。

コードを参照してください：

var itemsLoaded = 10;    

$.getJSON('http://api.flickr.com/services/rest/?format=json&method=flickr.photosets.getPhotos&photoset_id=' + photoset_id + '&per_page=' + itemsLoaded + '&page=1' + '&api_key=' + apiKey + '&user_id=' + userId + '&jsoncallback=?', function (data) {
$.each(data.photoset.photo, function (i, flickrPhoto) {
    var basePhotoURL = 'http://farm' + flickrPhoto.farm + '.static.flickr.com/' + flickrPhoto.server + '/' + flickrPhoto.id + '_' + flickrPhoto.secret + "_b.jpg";
    var basePhotoURLMobile = 'http://farm' + flickrPhoto.farm + '.static.flickr.com/' + flickrPhoto.server + '/' + flickrPhoto.id + '_' + flickrPhoto.secret + "_z.jpg";
    var flickrLink = "http://www.flickr.com/photos/" + data.photoset.owner + "/" + flickrPhoto.id + "/";

    var $img = $("<img/>").attr("src", basePhotoURL);
    var $imgMobile = $("<img/>").attr("src", basePhotoURLMobile);
    var $wrap = $("<div class='item'></div>");
    $(".item:nth-child(9n)").addClass("tenth");

    if($(window).width() < 501) {
        $wrap.append($imgMobile);
    } else {
        $wrap.append($img);
    }

    $wrap.append("<a href='" + basePhotoURL + "'.jpg' title='View full size' class='zoom' rel='enroll' />");
    $wrap.append("<a href='" + flickrLink + "' class='flickr' title='View on Flickr' target='_blank' />");
    $wrap.appendTo('#photographs');
});



var loaded = 0;
var totalAmount = $('#photographs .item').length;

    $('#photographs .item img').each(function() {
        loaded;
        $(this).imagesLoaded(function($images) {
            loaded++;
            var percentage =  parseInt((loaded / 11) * 100);
            console.log(loaded + ' van de ' + totalAmount);
            $("#bigloader").progressbar({
               value: percentage
            });
            if(loaded == 10) {
                $("#photographs, #loader").fadeIn("fast");
                $("#bigloader, #preloading").fadeOut("fast");
                $("#photographs").gridalicious({
                    gutter: 2,
                    animate: true,
                    effect: 'fadeInOnAppear',
                    width: 430
                });
                $('.item.tenth').waypoint({
                  triggerOnce: true,
                  handler: function(){
                    console.log("arrived at trigger");
                    itemsLoaded = itemsLoaded + 5;
                  }, 
                  offset: '50%'
                });
            } else if (loaded == totalAmount) {
                $("#loader").fadeOut("fast");       
            };
        });
    });

追加の説明：

itemsLoaded変数は、ウェイポイントがヒットするたびに+5値で更新されます。itemsLoadedは、JSONを介して読み込まれるアイテムの数の鍵です。そのため、JSONフィードを更新する必要があります。

基本的に、既存のJSONフィードを更新された変数で更新するにはどうすればよいですか？

4

1 に答える 1

1

flickr APIを新たに呼び出すには、「$。getJSON」メソッドを、ウェイポイントに到達したときに再度呼び出すことができる関数でラップする必要があります。コンテナに要素を追加しているという点でもエラーがあると思いますが、同じ要素すべてに5を加えたものを取得するのではなく、次の10個の要素を追加したいと考えています。したがって、ロードする要素の量ではなく、flickrAPIからロードするページを参照する変数を使用することをお勧めします。

jqueryウェイポイントプラグインを使用していると思います。実際、この例では、次のアイテムのみが取得され、コンテナ要素に追加されていることがわかります。コンテナ要素に追加を行っているので、それがあなたがやろうとしていることだと思います。したがって、取得する要素の量ではなく、取得するページを参照する変数を使用することをお勧めします。要素の数は常に10ですが、10個の要素の次のページを取得して、それらをコンテナーに追加します。

この変数を変更すると、問題の解決策は次のように簡単になります。

function refreshJSON(pageLoaded){
  $.getJSON('http://api.flickr.com/services/rest/?format=json&method=flickr.photosets.getPhotos&photoset_id=' + photoset_id + '&per_page=10&page=' + pageLoaded + '&api_key=' + apiKey + '&user_id=' + userId + '&jsoncallback=?', function (data) {
    $.each(data.photoset.photo, function (i, flickrPhoto) {
      var basePhotoURL = 'http://farm' + flickrPhoto.farm + '.static.flickr.com/' + flickrPhoto.server + '/' + flickrPhoto.id + '_' + flickrPhoto.secret + "_b.jpg";
      var basePhotoURLMobile = 'http://farm' + flickrPhoto.farm + '.static.flickr.com/' + flickrPhoto.server + '/' + flickrPhoto.id + '_' + flickrPhoto.secret + "_z.jpg";
      var flickrLink = "http://www.flickr.com/photos/" + data.photoset.owner + "/" + flickrPhoto.id + "/";

      var $img = $("<img/>").attr("src", basePhotoURL);
      var $imgMobile = $("<img/>").attr("src", basePhotoURLMobile);
      var $wrap = $("<div class='item'></div>");
      $(".item:nth-child(9n)").addClass("tenth");

      if($(window).width() < 501) {
          $wrap.append($imgMobile);
      } else {
          $wrap.append($img);
      }

      $wrap.append("<a href='" + basePhotoURL + "'.jpg' title='View full size' class='zoom' rel='enroll' />");
      $wrap.append("<a href='" + flickrLink + "' class='flickr' title='View on Flickr' target='_blank' />");
      $wrap.appendTo('#photographs');
  });



  var loaded = 0;
  var totalAmount = $('#photographs .item').length;

  $('#photographs .item img').each(function() {
      $(this).imagesLoaded(function($images) {
          loaded++;
          var percentage =  parseInt((loaded / 11) * 100);
          console.log(loaded + ' van de ' + totalAmount);
          $("#bigloader").progressbar({
             value: percentage
          });
          if(loaded == 10) {
              $("#photographs, #loader").fadeIn("fast");
              $("#bigloader, #preloading").fadeOut("fast");
              $("#photographs").gridalicious({
                  gutter: 2,
                  animate: true,
                  effect: 'fadeInOnAppear',
                  width: 430
              });
              $('.item.tenth').waypoint({
                triggerOnce: true,
                handler: function(){
                  console.log("arrived at trigger");
                  pageLoaded++;
                  refreshJSON(pageLoaded);
                }, 
                offset: '50%'
              });
          } else if (loaded == totalAmount) {
              $("#loader").fadeOut("fast");       
          };
      });
  });
}

refreshJSON(1); // we start by loading the first page
于 2013-01-26T21:00:25.473 に答える